if else 条件在 foreach 中不起作用

Question

我在 foreach 循环中使用 if else 并将该值与容器绑定，但我不明白为什么 if else 条件在 foreach 中不起作用，它在 html 页面中显示 if else 语句，如 if({detailInfo.condition} != = ""){} 但条件不起作用？如何在 div 元素中使用 if else ？

async function renderViewDetails(data, dataTableOrders) {
      let ordersDetails = data.group_id;
      var detailInfos = dataTableOrders;

      let html =
        `<div class="viewDetailModal">
          <div class="detailButtonModal">
            <p class="viewOrderId">ID:</p>
            <p class="orderdetailsid viewOrderId">${data.id}</p>
            <p class="coinviewDetail">${data.coin}</p>
          </div>
          
          <div class="rb-container">
            <ul class="rb">`;

      detailInfos.forEach(detailInfo => {
        if (detailInfo.group_id == ordersDetails) {
          let htmlSegment = `
                  <li class="rb-item timelimeVertical" ng-repeat="itembx">
                    <div class="tradingOrdersInfo">
                    <p class="orderDetailDate">${detailInfo.openedAt}</p>
            
                    <div class="tradeOrderType">
                    <p class="viewDetailOrderType">${detailInfo.type}</p>
                    <button id="showMoreLess_${detailInfo.id}" 
                     data-order-id="${detailInfo.id}" 
                     class="viewDetailOrderButton">View 
                     More</button>
                    </div>
            
                                    
                    <div id="showme_${detailInfo.id}" style="display:none";>
            
                    <div class="tradeOrderEntry">
                    <div>
                    <p class="orderDetailQuantity">Quantity:</p>
                    <p class="orderDetailQuantityValue">${detailInfo.volume}</p>
                   </div>
                   <div class="tradeOrdervaluePrice">
                   <p class="orderPnlInner"> &nbsp; ${detailInfo.group_pnl}</p>
                   <p class="pnlInnerLabel">PNL</p>
                   </div>
                   </div>
            
            
                   <div class="tradeOrderEntry tradeOrderEntryValue">
                   <div>
                   <p class="detailEntryValue entryOpa ">TP Target</p>
                   <p class="detailEntryValue entryOpa">Entry Target</p>
                   </div>
            
 if({detailInfo.condition} !== null){
                   <div>
                   <p class="detailEntryValueR viewPadd">{detailInfo.condition}</p>
                   <p class="detailEntryValueR"> {detailInfo.condition} </p>
                   </div>
                   </div>
            }
            
                   <div class="tradeOrderEntry tradeOrderEntryValue">
                   <div>
                   <p class="detailEntryValue entryOpa">Expire</p>
                   </div>
            
                  
                     </div>
            
                  </div>
                  </li>`

          html += htmlSegment;
        }
      });
      html += `</ul></div></div>`;

      let container = document.querySelector('.orders-details-info');
      container.innerHTML = html;

      }