时间戳

首页 > 解决方案 > 在 Angular 5 中呈现 *ngFor 指令的索引值时面临问题

javascript - 在 Angular 5 中呈现 *ngFor 指令的索引值时面临问题

问题描述

在为特定用例呈现 *ngFor 指令的索引时，我遇到了一个问题，如下所示。

假设我们有一个对象数组

this.temp = [
  {name:'John',age:24,visibility:'visible',
  {name:'Kane',age:26,visibility:'hidden',
  {name:'Ross',age:28,visibility:'visible',
  {name:'Lui',age:21,visibility:'visible'
]

为了在我的 app.component.html 文件中呈现它，我有如下的 html

<div *ngFor="let user of temp; let i = index">
 <div *ngIf="user.visibility === 'visible' ">
    <div>{{i+1}}</div>
    <div>{{user.name}}</div>
 </div>
</div>

因此，根据上面的数组示例，它呈现用户

1.John
2.Ross
3.Lui

现在，在我的 UI 中，每个用户都有一个名为“更改可见性”的按钮，它会将用户的可见性状态从“隐藏”切换为“可见”，反之亦然。

因此，单击针对 John 提到的按钮，它会将其可见性设置为隐藏，但呈现的 UI 是

2.Ross
3.Lui

我的预期输出是

1.Ross
2.Lui

如何使索引正确呈现？

这里的用例是我无法根据长度修改/更改我的 this.temp 数组。基本上我需要整个数组，其中仅根据用户操作更改可见性属性。

请帮忙。

标签： javascriptangulartypescriptecmascript-6

解决方案

您可以先过滤数组：

<div *ngFor="let user of temp.filter(us => us.visibility === 'visible'); let i = index">
 <div>
    <div>{{i+1}}</div>
    <div>{{user.name}}</div>
 </div>
</div>

像这样，您也不会分析所有数组项，更有效和更理想的输出。

干杯!

推荐阅读