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

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

config.vm.provider "virtualbox" do |vb|
 vb.gui = true
 vb.memory = "1024"
end

HTML

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});

Demo

Answer 2

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

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

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>

在相应的列中分配值

2 个答案: