角度4:将ngIf和ngFor用于ngFor中的同一字段

Question

我是 Angular 4 的新手，我的代码遇到了一个问题。下面是我的代码：

杰森：

          [{"name": "A", "date": "2017-01-01", "value": "103.57"},
           {"name": "A", "date": "2017-01-08", "value": "132.17"}, 
           {"name": "A", "date": "2017-01-15", "value": "268.04"}, 
           {"name": "A", "date": "2017-01-22", "value": "235.10"}, 
           {"name": "A", "date": "2017-01-29", "value": "83.78"}, 
           {"name": "A", "date": "2017-02-12", "value": "162.52"}, 
           {"name": "A", "date": "2017-02-19", "value": "131.63"}, 
           {"name": "B", "date": "2017-01-01", "value": "0.56"}, 
           {"name": "B", "date": "2017-01-08", "value": "275.55"}, 
           {"name": "B", "date": "2017-01-15", "value": "288.37"}, 
           {"name": "B", "date": "2017-01-29", "value": "250.05"}, 
           {"name": "B", "date": "2017-02-05", "value": "124.90"}, 
           {"name": "B", "date": "2017-02-12", "value": "6.15"}, 
           {"name": "C", "date": "2017-01-08", "value": "75.55"}, 
           {"name": "C", "date": "2017-01-15", "value": "88.37"}, 
           {"name": "C", "date": "2017-01-22", "value": "34.31"}, 
           {"name": "C", "date": "2017-01-29", "value": "0.05"}, 
           {"name": "C", "date": "2017-02-05", "value": "4.90"}, 
           {"name": "C", "date": "2017-02-12", "value": "6.15"}, 
           {"name": "D", "date": "2017-01-08", "value": "5.55"}, 
           {"name": "D", "date": "2017-01-15", "value": "8.37"}, 
           {"name": "D", "date": "2017-01-22", "value": "4.31"}, 
           {"name": "D", "date": "2017-01-29", "value": "50.05"}, 
           {"name": "D", "date": "2017-02-05", "value": "4.90"}, 
           {"name": "D", "date": "2017-02-12", "value": "6.15"}

.HTML：

                        <thead>
                            <tr id="row">
                                <th class="align-right"  *ngFor="let item of calendarTableSelected|slice:0:8">{{item.date}}</th>
                            </tr>
                        </thead>
                        <tbody id="body">
                            <tbody contenteditable='true'>
                            <tr  class="align-right">
                                <ng-container *ngFor="let item of calendarTableSelected">
                                    <td *ngIf="item.name == 'A'" [(ngModel)]="item.value" ngDefaultControl>  
                                           {{item.value}}
                                </td>
                                </ng-container>
                            </tr>
                            <tr  class="align-right">
                                    <ng-container *ngFor="let item of calendarTableSelected">
                                        <td *ngIf="item.name == 'B'" [(ngModel)]="item.value" ngDefaultControl>  
                                                {{item.value}}
                                    </td>
                                    </ng-container>
                            </tr>
                            <tr  class="align-right">
                                    <ng-container *ngFor="let item of calendarTableSelected">
                                        <td *ngIf="item.name == 'C'" [(ngModel)]="item.value" ngDefaultControl>  
                                                {{item.value}}
                                    </td>
                                    </ng-container>
                            </tr>
                              <tr  class="align-right">
                                    <ng-container *ngFor="let item of calendarTableSelected">
                                        <td *ngIf="item.name == 'D'" [(ngModel)]="item.value" ngDefaultControl>  
                                                {{item.value}}
                                    </td>
                                    </ng-container>
                            </tr>
                        </tbody>
                    </table>
                </div>

我不想在 HTML 中的 ngIf 中硬编码名称："A"、"B"、"C"和"D"以显示值。相反，我希望它在"名称"字段中循环并相应地显示该特定名称的值。
我也不想更改 json 结构。

请帮忙。

问候Neha

Answer 1

假设您的数据被返回并存储在变量 data 中。

首先，创建一个名为 names 的变量：

names: string[] = [];

然后，在接收到的数据上，填充数组：

this.names = this.data.filter(line => {
  if (!this.names.includes(line.name)) { this.names.push(line.name); }
});

在 HTML 中，您现在可以遍历名称数组

<tr class="align-right" *ngFor="let name of names">
  <ng-container *ngFor="let item of calendarTableSelected">
    <td *ngIf="item.name == name" [(ngModel)]="item.value" ngDefaultControl>
      {{item.value}}
    </td>
  </ng-container>
</tr>

Answer 2

编辑：

更高效(仅迭代整个数组一次，然后仅针对每个特定名称迭代整个数组

，而不是针对每个名称迭代整个数组(：

在 html 中：

<ng-container *ngFor="let name of names">
      <tr class="align-right">
        <ng-container *ngFor="let item of seperated[name]">
          <td [(ngModel)]="item.value" ngDefaultControl>
            {{item.value}}
          </td>
        </ng-container>
      </tr>
</ng-container>

在组件中：

  ngOnInit() {
    this.initNames();
  }

  seperated = {};
  names = [];
  initNames() {
    this.calendarTableSelected.forEach(item => {
      if (!this.seperated[item.name]) {
        this.seperated[item.name] = [];
      }
      this.seperated[item.name].push(item);
    });
    this.names = Object.keys(this.seperated);
  }

这可能不是最有效的方法，但是您可以尝试仅按不同名称将项目保存在另一个数组中(每个名称只能出现一次(，然后执行以下操作

      <tr class="align-right" *ngFor="let unique of distinctNames">
        <ng-container *ngFor="let item of calendarTableSelected">
          <td *ngIf="item.name == unique.name" [(ngModel)]="item.value" ngDefaultControl>
            {{item.value}}
          </td>
        </ng-container>
      </tr>

在组件中：

  ngOnInit() {
    this.initNames();
  }
  distinctNames = [];
  initNames() {
    let unique = this.calendarTableSelected.filter(this.onlyUnique);
    this.distinctNames = unique;
  }
  onlyUnique(item, index, arr) {
    return arr.indexOf(arr.find(v => v.name == item.name)) === index;
  }