代码之家 › 专栏 › 技术社区 › Maniraj Murugan

在各自的列中分配值

angular6 angular5 typescript angular javascript

Maniraj Murugan · 技术社区 · 6 年前

在我的角度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 对象AS 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 列…

和只要产品具有该属性,则需要以其他方式填充特定值。 “-” 符号…

希望你明白我的要求。

请帮助我转换 电流输出 进入之内 预期产量 .

2 回复 | 直到 6 年前

Sachila Ranawaka 6 年前

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

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

dquijada 6 年前

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

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

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 & GT; :

<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>