Angular2 verstecken doppeltes Objekt

Question

Ich habe angular2/4 App, wo ich Daten von einem Web-API (JSON) auf die Tabelle anzeigen. In AngularJS ich benutze:

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

es funktioniert, aber wenn ich versuchen, diese in Angular 2 \ 4 es funktioniert nicht. Ich versuchte dies:

<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> <!--{{i}}--> 
      <td> 
       <!--<strong 
       [ngStyle]="{display: (result[i].ProdShifts.Product.Name === result[i-1].ProdShifts.Product.Name) ? 'none':'block'}">--> 
       <!--<strong 
       [ngStyle]="{display: (i=0) ? ((result[i].ProdShifts.Product.Id != result[i-1].ProdShifts.Product.Id) ? 'none':'block'):'block'}">--> 
       <!--[hidden]="result[i].ProdShifts.Product.Id != result[i-1].ProdShifts.Product.Id">--> 
       <!--*ngIf="index > 0"--> 
       <!--<strong 
       *ngIf="index > 0 && result[i].ProdShifts.Product.Id != result[i-1].ProdShifts.Product.Id">--> 
       <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> 

Wie kann ich nur den ersten Wert anzuzeigen und zu vervielfältigen verstecken sich in {{data.ProdShifts.Product.Name}}?

[Bearbeiten] Also schließlich gab es ein Problem mit dem ngStyle-Eintrag. Das ist was ich brauche und ich habe keine Pfeife benutzt.

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

Answer 1

können Sie ein eigenes Rohr schreiben die Daten nach Ihrem Bedarf zu filtern.

Bitte ein Beispiel finden Sie hier: http://plnkr.co/edit/E7HlWeNJV2N3zwPfI51Q?p=preview

declare var _: any; // lodash, not strictly typed 

@Pipe({ 
    name: 'uniqFilter', 
    pure: false 
}) 
@Injectable() 
    export class UniquePipe implements PipeTransform { 
     transform(items: any[], args: any[]): any { 

     // lodash uniqBy function 
     return _.uniqBy(items, args); 
    } 
} 

Nutzung:

<div> 
    <ul> 
     <li *ngFor="let data in ProductData | uniqFilter: 'Name'">{{ account.accountNumber }}</li> 
    </ul> 
</div> 

Answer 2

Entweder ein eigenes Rohr verwenden oder die eindeutigen Werte aus dem Ergebnis extrahieren, bevor es in der Vorlage zu binden.