javascript - 如何在 *ngFor 中获取 *ngIf 的第一个真值

Question

我有一组需要根据 Angular 色显示的项目。我需要满足 ngIf 条件的第一个值。

我在下面添加我的代码:

我的阵列(它最初的样子):

parentTabList = [ 
        {
            name: 'abc',
            label: 'abc',
            icon : 'question_answer',
            role : ['vend_perm','vend_temp','vend_subs']
        },
        {
            name: 'xyz',
            label: 'xyz',
            icon : 'question_answer',
            role : ['vend_perm','vend_subs']
        }
    ]

我的 HTML:-

<ng-container *ngFor="let form of parentTabList let i = index">
    <li *ngIf="form.role.includes(userRole)">
        <a (click)="methodName(form)">
            {{form.label}}
        </a>
    </li>
</ng-container>

UserRole 是用户登录时得到的字符串值。

如果它是要显示的第一个 anchor ，我需要将 ngClass 添加到 anchor 标记。 (我是 StackOverflow 的菜鸟，如果需要更多解释，请告诉我)。

Answer 1

您可以使用索引标识数组的第一个元素。

但根据我的理解，您需要使用 Angular 色过滤此数组，然后将 ngClass 应用于过滤列表中的第一个元素。

因此添加方法以返回关于 Angular 色的过滤数组

在模板中:

 filterParentTabList(parentList: any) {
     return parentList.filter(form => form.role.includes(this.userRole));
 }

在 View 中:

<ng-container *ngFor="let form of filterParentTabList(parentTabList); let i = index">
    <li>
        <a [ngClass]="{ 'addYourClaaName': i === 0 }" (click)="methodName(form)">
            {{form.label}}
        </a>
    </li>
</ng-container>

快乐编码.. :)