javascript - 在各个列中分配值

Question

在我的 Angular 6 应用程序中，我正在制作一个包含以下内容的表格，

HTML:

<table>
    <thead>
        <tr>
            <th>
                Property Details &nbsp; &nbsp; &nbsp; &nbsp;
            </th>
            <th>
                {{productOneDetails}}  &nbsp; &nbsp; &nbsp; &nbsp;
            </th>
            <th>
                {{productTwoDetails}} 
            </th>
        </tr> <br>
    </thead>
    <tbody>
        <tr *ngFor="let item of mergedArray">
      <td> {{ item.property_name }} </td>
      <td> {{ item.property_value }} </td>
      <td> {{ item.property_value }} </td>
        </tr>
    </tbody>
</table>

在上面，我在 products 对象中有两个数组作为 product one 和 product two..

最后我需要合并属性 this.productOneProperties 和 this.productTwoProperties 并将最终结果显示在表中..

目前一切正常..

工作示例: https://stackblitz.com/edit/angular-iv8ckz

在这里您可以看到当前结果，

Property Details            Product One         Product Two

Length                        12cm                12cm
Width                         10cm                10cm
Height                        20cm                20cm
Color                         Red                 Red
Size                          Medium              Medium

而预期输出是，

Property Details            Product One         Product Two

Length                        12cm                -
Width                         10cm                -
Height                        20cm                -
Color                         -                   Red
Size                          -                   Medium

所以通常我需要合并数组并在 Property Details 列中显示所有属性..

如果只有产品具有该属性，则需要填充特定值，否则它应该使用“-”符号..

希望你明白我的要求是什么..

请帮助我将当前输出转换为预期输出。

Answer 1

为每个对象添加一个类型以识别产品。然后使用模板中的条件进行评估

this.products.productOne.forEach(element => {
  this.productOneDetails = element.product_name; 
  this.productOneProperties = element.productOneProperties.map(item => {item.type = "one"; return item});
});
this.products.productTwo.forEach(element => {
  this.productTwoDetails = element.product_name; 
  this.productTwoProperties = element.productTwoProperties.map(item => {item.type = "two"; return item});

HTML

 <tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ item.type === "one" ? item.property_value: '-' }} </td>
  <td> {{ item.type === "two" ? item.property_value: '-'  }} </td>
 </tr>

Demo