嵌套数组值未显示在 angular 的 innerHTML table td 部分？

Question

我有一个动态 innerHTML，我们必须在其中显示动态数据，但问题是每个值都是可见的，但 table td 值未显示其显示的未定义值，任何人都可以帮助如何进入 td标记？

viewDynamicHTML(){
   return `<div class="form-tab"  id="OrderDetailsPage">
   <div class="form-group">
     <div class="col-md-5"> 
       <b>PO#</b>:<p>${this.salesOrderModel.CustomerRefNo}</p>
     </div>
     <div class="col-md-5" style="float:right;"> 
       <b>SO#</b>:<p>${this.salesOrderModel.ERPSalesOrderKey}</p>
     </div>
   </div> 
   </div>  
    <table class="table" border="1"  cellspacing="5"  cellpadding="5">
        <thead>
            <tr>
                <th>Item</th>
                <th  width="50%">Description</th>
                <th>Quantity</th>
                <th>Unit</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody id="tableBody">
          ${this.renderTableTd()}
        </tbody>
    </table>
  }

  renderTableTd(){
      const tableData =  this.salesOrderModel.SalesOrderItemList.map((data)=>{
        return (
          `<tr>
              <td>${data.ERPItemKey}</td>
              <td>${data.ItemName}</td>
              <td>${data.Quantity}</td>
              <td>${data.QuantityUnit}</td>
              <td>${data.UnitPrice}</td>
              <td>${data.UnitPrice * data.Quantity}</td>
          </tr>`
        );
      })
  }

FieldName: "<div class=\"form-tab\"  id=\"OrderDetailsPage\">\n    <div class=\"print-area\">\n        <div class=\"form-group\">\n          <div class=\"col-md-12\"><span class=\"page-name\">Web Order</span></div>\n          <div class=\"col-md-12\"> <div class=\"divider\"></div><br> </div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-12\">\n            <div class=\"logo-img\">                \n              <img *ngIf=\"${this.businessLogoUrl} && ${this.businessLogoUrl} != '\" src=\"${this.businessLogoUrl}\" />\n            \n          </div>\n          <div class=\"business-name\"> ${this.tenantName}</div><br>\n            <div class=\"form-group\" style=\"margin-left: 70px;\">  \n              <div class=\"col-md-12\">\n                ${this.salesOrderModel.BusinessAddress}    \n              </div>\n          </div>\n            <div class=\"form-group\" style=\"margin-left: 70px;\">\n              <div class=\"col-md-12\">  \n                ${this.salesOrderModel.BusinessContactNo}\n              </div>  \n          </div>\n          </div>\n        </div>  <hr>\n        <div class=\"form-group\">\n          <div class=\"col-md-12\"></div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-5\" style=\"float:right;\">\n            <b>Ship To</b>\n            :${this.salesOrderModel.CustomerName}<span *ngIf=\"${this.salesOrderModel.ShipToKey}\">,${this.salesOrderModel.ShipToKey}</span>\n            <p>${this.salesOrderModel.ShipToAddress}</p>\n          </div>\n          <div class=\"col-md-5\" >\n            <b>Bill To</b>:${this.salesOrderModel.CustomerName}<p>${this.salesOrderModel.BillToAddress }</p>\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-12\"></div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-5\">\n            <b>PO#</b>:<p>${this.salesOrderModel.CustomerRefNo}</p>\n          </div>\n          <div class=\"col-md-5\" style=\"float:right;\">\n            <b>SO#</b>:<p>${this.salesOrderModel.ERPSalesOrderKey}</p>\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-12\"></div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-5\">\n            <b>Order Date</b>:<p>${this.salesOrderModel.PostingDate}</p>\n          </div>\n          <div class=\"col-md-5\" style=\"float:right;\">\n            <b>Requested Date</b>:<p>${this.salesOrderModel.DeliveryDate}</p>\n          </div>\n        </div>  \n        <table class=\"table\" border=\"1\"  cellspacing=\"5\"  cellpadding=\"5\">\n          <thead>\n            <tr>\n              <th>Item</th>\n              <th  width=\"50%\">Description</th>\n              <th>Quantity</th>\n              <th>Unit</th>\n              <th>Price</th>\n              <th>Total</th>\n            </tr>\n          </thead>\n          <tbody id=\"tableBody\">\n            ${this.renderDynamicColoumsValue()}\n          </tbody>\n        </table>\n        <div class=\"form-group\">\n          <div class=\"col-md-12\"></div>\n        </div>\n        <hr>\n        <div class=\"form-group\">\n          <div class=\"col-md-4\" *ngIf=\"${this.totalAmount>0}\">\n            <b>Total Quantity</b>: <p>${this.totalQuantity}</p>\n          </div>\n          <div class=\"col-md-4\" style=\"float:right;\" *ngIf=\"${this.totalAmount>0}\">\n            <b>Total Amount</b>:<p>${this.totalAmount}</p>\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-12\"> <span class=\"sub-title\"><h3>Remarks</h3></span></div>\n        </div>\n        <div class=\"form-group\">\n          <div class=\"col-md-12\">\n            ${this.salesOrderModel.Remarks}\n          </div>\n        </div>\n      </div>\n    </div>\n"

Answer 1

您正在指定常量，但您并没有 returning 它。目前 renderTableTd() 有一个 return 类型的 void。如果您提到您期望的 return 类型，IDE 会对您有所帮助。

  renderTableTd(){
      const tableData =  this.salesOrderModel.SalesOrderItemList.map((data)=>{
        return (
          `<tr>
              <td>${data.ERPItemKey}</td>
              <td>${data.ItemName}</td>
              <td>${data.Quantity}</td>
              <td>${data.QuantityUnit}</td>
              <td>${data.UnitPrice}</td>
              <td>${data.UnitPrice * data.Quantity}</td>
          </tr>`
        );
      });
      return tableData; // <---try this
  }

嵌套数组值未显示在 angular 的 innerHTML table td 部分？

Nested array value not showing in the innerHTML table td section in angular?

innerhtml

angular