Question

我是Angular 4的新手，我的代码中遇到了问题。以下是我的代码：

JSON：

          [{"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>

我不想对名称进行硬编码：＆＃34; A＆＃34;，＆＃34; B＆＃34;，＆＃34; C＆＃34;和＆＃34; D＆＃34;在HTML中为ngIf显示要显示的值。相反，我希望它循环使用＆＃34; name＆＃34;字段并相应地显示该特定名称的值我也不想改变json结构。

请帮忙。

此致 NEHA

Answer 1

修改

效率更高（只迭代整个数组一次，然后只为每个特定名称迭代，而不是每个名称的整个数组）：

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

Answer 2

鉴于您的数据已返回并存储在变量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>

Angular 4：对ngFor中的相同字段使用ngIf和ngFor

2 个答案: