我在为特定用例渲染 *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 数组。基本上,我需要整个数组,其中仅根据用户操作更改可见性属性。
请帮忙。
最佳答案
您可以先过滤数组:
<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>
这样,您就不必分析所有数组项,从而获得更高效和期望的输出。
干杯!
关于javascript - 在 Angular 5 中渲染 *ngFor 指令的索引值时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51210108/