Question

我有一个数组，其结构如下：

Names : ["X","y","","Z"];

我有一个* ngFor Iterator，用于显示数组元素。我想要-忽略数组中的空元素，并输出如下输出：

 1. X
 2. Y
 3. Z

问题是当我使用此代码时：

<div*ngFor="let child of Names; let bpiIndex = index" class="sub-title _h4">
   <span *ngIf="child">{{bpiIndex + 1}}.{{child}}</span>
</div>

它生成如下输出：

1. X
2. Y
4. Z

有没有一种方法可以控制索引，以便它可以省略数组中的null或空值（鉴于我正在模板中尝试这样做）？

Answer 1

问题是您应该在实例化一个新变量时使用实际索引。

让bpiIndex =索引

而不是将此实例化 bpiIndex 设置为0 并使用 var ，以便该值保持在循环之间

var bpiIndex = 0

您还可以缓冲按名称过滤的第二个数组，因此，如果值不具有名称，它们将不属于第二个数组并呈现此新列表。

CurrentArray : string[] = ["X","y","","Z"];
...
ngOnInit() {
  this.BufferArrayNoNull = this.CurrentArray.filter(i=>i);
}

Answer 2

this.names = this.names.filter((name)=> {
if(name != '') {
return true
}
}) // ["x", "y", "z"]

所以它将如您预期的那样输出

// 1.X

     2.Y

     3.Z

Answer 3

在获得值后，只需运行以下过滤方法

Names : string[] = ["X","y","","Z"]; // this set the value and the type
...
ngOnInit() {
  this.Names = this.Names.filter(i=>i); // falsy value will removed
}

如果您通过http请求获得了值，请使用map rxjs运算符

this.service(...)
 .pipe(map( result => result.filter(i=>i)))
 .subscribe(result => this.Names = result )

Answer 4

您可以filter的“名称”列表仅保留相关值。如果您需要在数组中使用这些空值，则必须创建相同的过滤器，仅用于通过pipe或其他过滤后的数组进行输出，并将其仅用于输出。

Angular-如何从ngFor中删除元素

4 个答案: