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中有一个按钮名称“针对每个用户更改可见性”，在该按钮中，用户的可见性状态将从“隐藏”切换为“可见”，反之亦然。

因此，点击针对John提及的按钮，它将其可见性设置为隐藏，但呈现的用户界面为

2.Ross
3.Lui

我的预期输出是

1.Ross
2.Lui

如何使索引正确呈现？

这里的用例是我不能在长度方面修改/更改this.temp数组。基本上，我需要整个数组，并且仅根据用户操作更改了visiblity属性。

请帮助。

Answer 1

您可以先过滤数组：

I2C_TIMINGR register configuration examples

像这样，您也不会对所有数组项进行分析，从而提高效率和所需输出。

干杯！

Answer 2

您还可以通过使用Pipe来达到所需的结果

HTML组件

<div *ngFor="let user of temp | visiblefilter ; let i=index">
    <span>{{i+1}} {{user.name}}</span> <button name={{user.name}} (click)="onHide($event)">Hide</button>
</div>

PIPE

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'visiblefilter',
    pure: false
})
export class VisibleFilterPipe implements PipeTransform {
    transform(items: any[]): any {
        return items.filter(({visibility}) =>visibility=='visible');
    }
}

您可以在此处查看工作示例 stackblitz

Answer 3

使用自定义trackby函数：

*ngFor="let user of temp; let i = index; trackBy: customTB"

customTB(index, item) {
  return index + ' - ' item.name;
}

在Angular 5中呈现* ngFor指令的索引值时遇到问题

3 个答案: