时间戳

首页 > 解决方案 > 如何在 *ngFor 中获得 *ngIf 的第一个真实值

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

问题描述

我有一系列需要根据角色显示的项目。我需要满足 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 是我在用户登录时获得的字符串值。

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

标签： javascriptangulartypescript

解决方案

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

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

所以添加方法来返回关于角色的过滤数组

在模板中：

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

在视图中：

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

快乐编码.. :)

推荐阅读