在各个列中分配值

Question

在我的 angular 6 应用程序中，我正在制作一个 table，其中包含以下内容，

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 并将最终结果显示在 table..

目前一切正常..

工作示例： 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 列中显示所有属性..

和如果只有产品有那个属性那么特定的值需要被填充否则它应该是"-" =52=]符号..

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

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

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

Answer 2

问题是，在您的 table 中，您使用相同的属性来显示两列中的变量，这意味着它们将始终显示相同的内容。

我能想到的最简单的方法：保存您在每个对象上使用的产品。这样您就可以轻松过滤：

ngOnInit 看起来像这样：

ngOnInit() {
    this.products.productOne.forEach(element => {
      this.productOneDetails = element.product_name;
      this.productOneProperties = element.productOneProperties;
      this.productOneProperties.map(p => {
        p.product = 1;
      });
    });

    this.products.productTwo.forEach(element => {
      this.productTwoDetails = element.product_name;
      this.productTwoProperties = element.productTwoProperties;
      this.productTwoProperties.map(p => {
        p.product = 2;
      });
    });

    this.mergedArray = [...this.productOneProperties, ...this.productTwoProperties];
}

你的 html 的 <tr>:

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ item.product === 1 ? item.property_value : "-" }} </td>
  <td> {{ item.product === 2 ? item.property_value : "-" }} </td>
</tr>

在不触及 ts 的情况下有点棘手，但可以在某些条件下完成：

仅修改 <tr>:

<tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
  <td> {{ productOneProperties.indexOf(item) !== -1 ? item.property_value : "-" }} </td>
  <td> {{ productTwoProperties.indexOf(item) !== -1 ? item.property_value : "-" }} </td>
</tr>

在各个列中分配值

Assign values in respective columns

javascript

typescript

angular

angular5

angular6