ngFor中的Angular 7对象数组仅显示具有特定对象属性值的数据答案

【问题标题】：Angular 7 Array of Objects in ngFor show only data with specific object property valuengFor中的Angular 7对象数组仅显示具有特定对象属性值的数据
【发布时间】：2020-01-22 20:16:27
【问题描述】：

我在将数据显示和保存到对象数组时遇到以下问题。我有一个带有 5 个标签的表格。我可以在这些选项卡之间切换并在表格中显示不同的数据。我还可以将一些新数据添加到特定的选项卡表中。我有一个称为“附加数据表格”的表格。表单工作正常，一旦我将一些数据添加到此表单并单击提交，我会将带有这些数据的对象推送到名为 arrayData 的数组中。我使用 *ngFor 来显示数据： <tr class="body-row" *ngFor="let position of arrayData; index as i;">

问题是，我将这些对象推送到全局数组（并且它有效），但我想仅在特定选项卡表上显示这些数据（我还想在特定选项卡上添加新表单）。我想要实现的是将这些数据推送到数组中，但在 *ngFor 指令中，我只想显示具有特定区域索引的数据。我所做的是，我正在获取选项卡索引，例如第一个选项卡的索引为 0，第二个选项卡的索引为 1 等。接下来，如果 selectedTabIndex 为例如 0，我将使用 switch case 检查我的代码，并且我m 将此值推送到我的对象属性“区域”，因此它看起来像区域：0。在这种情况下，我有一个看起来像这样的对象： {zone: 0, data1: "33", data2: "4", data3: "5", data4: true} 如果我在索引为 2 的选项卡上推送数据，我会将此信息设置为我的对象，因此 zone:2 将添加到我的下一个对象中。我的数组如下所示：

[
0: {zone: 1, data1: 1, data2: 2},
1: {zone: 1, data1: 23, data2: 33},
2: {zone: 2, data1: 33, data2: 44}
]

等等。根据女巫标签，我发布了我的表单。

是否有快速的解决方案来显示标签索引 0 上的数据、具有 zone:0 值的对象、索引 1 上的标签 zone:1 值等？也许我应该为特定区域使用单独的对象数组？谢谢。

【问题讨论】：

标签： arrays angular object ngfor

【解决方案1】：

=如果我能很好地理解您的问题，您可以过滤您的数组。

getData(){
    return arrayData.filter(d => d.zone === this.selectedZone);
}

在 ngfor 中使用这个方法。

【讨论】：