在各个列中分配值答案

【问题标题】：Assign values in respective columns在各个列中分配值
【发布时间】：2019-05-17 22:10:42
【问题描述】：

在我的 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 列中显示所有属性..

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

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

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

【问题讨论】：

您的属性名称是否固定？我的意思是这样的长度，宽度，高度，颜色，大小。
@KarnanMuthukumar，我将通过服务获得动态。为了制作 stackblitz，我在这里进行了硬编码。这将是来自服务的任何内容。

标签： javascript angular typescript angular5 angular6

【解决方案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

【讨论】：

如果不添加额外的行就不能达到结果吗？？
你需要一个属性来识别哪个对象属于哪个产品
@undefined 检查我编辑的答案，你有一个无需编辑 .ts 的解决方案
@SachilaRanawaka，你能帮我解决这个stackoverflow.com/questions/53827050/…的扩展问题吗？

【解决方案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>

【讨论】：