javascript - 在 Angular 5 中渲染 *ngFor 指令的索引值时遇到问题

Question

我在为特定用例渲染 *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 中针对每个用户都有一个名为“更改可见性”的按钮，它将把用户的可见性状态从“隐藏”切换到“可见”，反之亦然。

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

2.Ross
3.Lui

我的预期输出是

1.Ross
2.Lui

如何让索引正确渲染？

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

请帮忙。

Answer 1

您可以先过滤数组:

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

这样，您就不必分析所有数组项，从而获得更高效和期望的输出。

干杯!