如何獲取* ngFor循環唯一記錄

如何從此數組中獲取唯一記錄。我需要從這些項目中獲得獨特的{{ subitem.author }}。如何獲取* ngFor循環唯一記錄

<div *ngFor="let item of items"> 
    <ion-list *ngFor="let subitem of item.items" (click)="authorquotes(subitem.author);"> 
     <ion-item > 
      {{ subitem.author }} 
     </ion-item> 
    </ion-list> 
</div>

在具有多個記錄的數組中。從那個數組中，我需要過濾獨特的作者。

來源

2017-04-20 Ayyan

你的意思是唯一的記錄？ –

在您的控制器中創建一個唯一項目列表，然後循環。 – 2017-04-20 07:09:26

'* ngFor'在這裏幫不了你。你可以創建一個過濾重複的管道，或者你可以在'* ngFor'中使用已經過濾了重複項的列表。 –

你必須創建一個過濾器具有獨特的項目陣列的管道：

@Pipe({ 
    name: 'filterUnique', 
    pure: false 
}) 
export class FilterPipe implements PipeTransform { 

    transform(value: any, args?: any): any { 

    // Remove the duplicate elements 
    let uniqueArray = value.filter(function (el, index, array) { 
     return array.indexOf (el) == index; 
    }); 

    return uniqueArray; 
    } 
}

那麼你可以申請你管：

<div *ngFor="let item of items | filterUnique"> 
    <ion-list *ngFor="let subitem of item.items" (click)="authorquotes(subitem.author);"> 
     <ion-item > 
      {{ subitem.author }} 
     </ion-item> 
    </ion-list> 
</div>

工作演示：https://plnkr.co/edit/yxvoKVD3Nvgz0T3AB7w3?p=preview

來源

2017-04-20 08:20:24

而不是使用'filter'和'indexOf'，你可以使用ES6 Set http://stackoverflow.com/a/33121880/6806381 –

@ChristopherMoore謝謝:)這是一個很好的方法。後來我可以用你的ES6解決方案更新我的文章。 –

其工作謝謝你Hristo Eftimov。 – Ayyan

如何獲取* ngFor循環唯一記錄

回答

相關問題