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

I have an dynamic innerHTML in which we have to show the dynamic data but issue is that every value is visible but table td values not showing its showing undefined value,can anybody help how to get inside td tag?

 viewDynamicHTML(){
   return `<div   id="OrderDetailsPage">
   <div >
     <div > 
       <b>PO#</b>:<p>${this.salesOrderModel.CustomerRefNo}</p>
     </div>
     <div  style="float:right;"> 
       <b>SO#</b>:<p>${this.salesOrderModel.ERPSalesOrderKey}</p>
     </div>
   </div> 
   </div>  
    <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>`
        );
      })
  }

CodePudding user response：

You're appointing your constant, but then you're not returning it. At the moment the renderTableTd() has a return type of void. The IDE would've helped you if you would mention the return type you expected.

  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
  }