Javascript 如何获取*ngIf inside*ngFor的第一个真值

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

我在下面添加我的代码：

我的阵列（它最初的外观）：

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

{{form.label}

UserRole是用户登录时获取的字符串值

如果它是要显示的第一个锚点，我需要将ngClass添加到锚点标记。

---

（我是StackOverflow的noob，如果需要更多解释，请告诉我）。

你可以这样写。在这段代码中，f表示数组的第一个位置

<ng-container *ngFor="let form of parentTabList; let i = index; let f = first">
    <li *ngIf="f">
        <a (click)="methodName(f)">
            `{{f.label}}`
        </a>
    </li>
</ng-container>

`{{f.label}}`

如果需要数组的其他位置，可以像上面提到的那样编写

---

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

但据我所知，您需要使用角色筛选此数组，然后将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>

视图中：

 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>

{{form.label}

---

快乐编码…）

您可以定义一个获取索引的getter。这可以在html中使用

get firstIndex（）{
返回this.parentTabList.indexOf（this.parentTabList.find（{role}）=>
role.includes（this.userRole）））
}

现在在您的html中

您是否尝试使用硬编码值？如果是第一个显示的锚，我需要将ngClass添加到锚标记中。这是什么意思？向我们展示预期的输出
一个简单的CSS解决方案怎么样
li:first child>a{background color:red；}
如果第一个元素不满足
ngIf条件，则此操作可能无效。）@ganesh045你检查过演示链接了吗？这完全符合OP问题要求EAH，您添加了
userRole
作为静态值
vend_temp
如果OP动态分配它会怎么样？所以您要检查两次条件，使用ngIf of
和getter方法，在这种情况下，不建议在容易避免的地方使用getter方法。@ganesh045这就是为什么我添加了一个select来动态更改userRole的值，如果您检查了演示，这一切都已清楚演示