角度模板* ngIf与数组进行比较

Question

我有一个在component.html中使用* ngFor显示的用户列表。

<div *ngFor="let user of users; let i=index">
    <div *ngIf=" ... if user.id in whitelistIDs ... ">
        selected!
    </div>
    <div #else not selected..>
</div

component.ts。

中的数组

whiteListIDs = [ "id1", "id2", ... ];

这可能吗？

Answer 1

是...

检查项目是否在数组中，如下所示：

<div *ngFor="let user of users; let i=index">
    <div *ngIf="whitelistIDs.indexOf(user.id) > -1; else notSelected">
        selected!
    </div>
    <ng-template #notSelected>
        Your id is whitelisted!
   </ng-template>
</div

如果项目在数组中，那么它将有一个索引，对于数组，从0,1,2,3等开始。因此，您检查它是否为0或更高。如果是，您知道它在数组中。如果它小于0，你就知道它不在数组中。

Answer 2

您应该使用component.ts中的函数调用* ngIf

<div *ngFor="let user of users; let i=index">
    <div *ngIf="checkUser(user.id)">
        selected!
    </div>
    <div #else not selected..>
</div>

并在component.ts中

checkUser(id:any){
   return this.whitelistIDs.indexOf(id:any) > -1;
}