In my Angular 2/4 application, I am fetching data from a web API (JSON) and displaying it in a table. In AngularJS, I use the following code:
<tbody ng-repeat="data in ProductData | filter:search | isAreaGroup:selectedArea">
<tr style="background-color:burlywood;cursor:pointer" data-toggle="modal" data-target="#editProduct"
ng-click="selectItem(data); setSelected(data.ProductId)">
<td class="text-right">{{data.Id}}</td>
<td>
<strong ng-show="ProductData[$index].ProdShifts.Product.Id != ProductData[$index-1].ProdShifts.Product.Id">
{{data.ProdShifts.Product.Name}} : {{data.ProdShifts.Product.Name}}
</strong>
</td>
<td class="text-center"><strong>{{data.ProdShifts.Shift}}</strong></td>
<td class="text-center">{{data.WorkersGroup}}</td>
<td class="text-center"><span>{{data.ProductionDay | date : 'd.MM.yyyy'}}</span></td>
<td class="text-center">{{data.ProdShifts.StartTime | date:'HH:mm'}} - {{data.ProdShifts.EndTime | date:'HH:mm'}}</td>
<td class="text-right">{{data.Norm | number : 2}}</td>
<td class="text-right">{{data.Workers | number : 2}}</td>
<td class="text-right">{{data.Productivity | number : 2}}</td>
<td class="text-center"><input type="checkbox" ng-model="data.Active" disabled /></td>
</tr>
</tbody>
However, when I attempt to implement this in Angular 2/4, it doesn't work as expected. Here is what I have tried:
<tbody>
<ng-template ngFor let-data [ngForOf]="(result) | filter:filterByName | areaFilter:filterArea" let-i="index" let-f="first" let-l="last">
<tr style="background-color:burlywood;cursor:pointer"
(click)="lgModal.show()">
<td class="text-right">{{data.Id}}</td>
<td>
<strong [hidden]="duplicateResult">
{{data.ProdShifts.ProdLines.Product.Name}} : {{data.ProdShifts.Product.Name}}
</strong>
</td>
<td class="text-center"><strong>{{data.ProdShifts.Shift}}</strong></td>
<td class="text-center">{{data.WorkersGroup}}</td>
<td class="text-center"><span>{{data.ProductionDay | date : 'd.MM.yyyy'}}</span></td>
<td class="text-center">{{data.ProdShifts.StartTime | date:'HH:mm'}} - {{data.ProdShifts.EndTime | date:'HH:mm'}}</td>
<td class="text-right">{{data.Norm | number: '1.2'}}</td>
<td class="text-right">{{data.Workers | number: '1.2'}}</td>
<td class="text-right">{{data.Productivity | number: '1.2'}}</td>
<td class="text-center"><input type="checkbox" [(ngModel)]="data.Active" disabled /></td>
</tr>
</ng-template>
</tbody>How can I display only the first value and hide duplicates in {{data.ProdShifts.Product.Name}}?
[Edit] I found an issue with the `ngStyle` usage. Here is the corrected code without using a pipe:
<td>
<strong
[ngStyle]="{display: ( i > 0) ? (( result[i].ProdShifts.Product.Id === result[i-1].ProdShifts.Product.Id ) ? 'none':'block'):'block'}">
{{data.ProdShifts.ProdLines.Product.Name}} : {{data.ProdShifts.Product.Name}}
</strong>