Angular2 hide duplicate item

Question

私は、ウェブapi（json）から表にデータを表示するangular2/4アプリを持っています。私が使用AngularJsで ：

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

それは動作しますが、私は角2 \ 4でこれをしようとすると、それが機能していません。 は、私はこれを試してみました：

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

はどうすれば{{data.ProdShifts.Product.Name}}における最初の値のみとの重複非表示を表示することができますか？

[編集] 最後に、ngStyleエントリに問題がありました。これは私が必要とするもので、私はパイプを使わなかった。

<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

あなたはあなたの必要性に従ってデータをフィルタリングするために、カスタムパイプを書くことができます。

ここで例をご覧ください：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); 
    } 
} 

用法：

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

Answer 2

をカスタムパイプを使用するか、テンプレートでそれを結合する前に結果からユニークな値を抽出どちらか。