Angular2隐藏重复项

Question

我有 angular2/4 应用程序，我将数据从 web api (json) 显示到表中。 在 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>

它可以工作，但是当我在 Angular 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

使用自定义管道或从结果中提取唯一值，然后将其绑定到模板中。