Angular - 如何从 ngFor 中删除元素答案

【问题标题】：Angular - How To remove the elements from ngForAngular - 如何从 ngFor 中删除元素
【发布时间】：2019-05-04 14:51:06
【问题描述】：

我有一个结构如下的数组：

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

我有一个显示数组元素的 *ngFor 迭代器。我想要那个 - 数组中的空元素被忽略并像这样打印输出：

 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

有没有一种方法可以控制索引，以便它可以省略数组中的空值或空值（鉴于我试图在模板中执行此操作）？

【问题讨论】：

创建一个pipe 或从您的.ts 中删除Names 中的空值
管道对于这种规模的东西来说并不划算。我认为拼接阵列是唯一不错的选择。谢谢@xyz
@vaibhav 管道的有效性没有问题，有 4 项。真正的问题是您应该在数组中保留空值，只显示非空值，还是只是更改数据集并从数组中删除值。
是的@trichetriche。我只是在寻找最有效的方法。
你有4个结果，别担心，什么都会有效率的:)

标签： angular angular6 angular2-template

【解决方案1】：

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

让 bpiIndex = 索引

而不是这个 instantiate bpiIndex to 0 并使用 var 使值保持在循环之间

var bpiIndex = 0

您还可以缓冲按名称过滤的第二个数组，因此如果值没有名称，它们将不会成为第二个数组的一部分并呈现这个新列表。

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

【讨论】：

可以用，只是多了一个变量。

【解决方案2】：

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

所以它会像你预期的那样输出

// 1.X

     2.Y

     3.Z

【讨论】：

【解决方案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 )

【讨论】：

【解决方案4】：

您可以filter您的“姓名”列表来保存相关值。如果您需要数组中的这些空值，您必须为通过 pipe 的输出创建相同的过滤器或一个额外的过滤数组，并将其仅用于输出。

【讨论】：