时间戳

首页 > 解决方案 > ngFor中的Angular 7对象数组仅显示具有特定对象属性值的数据

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

问题描述

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

问题是，我将这些对象推送到全局数组（并且它有效），但我想仅在特定选项卡表上显示这些数据（我还想在特定选项卡上添加新表单）。我想要实现的是将这些数据推送到数组中，但在 *ngFor 指令中，我只想显示具有特定区域索引的数据。我所做的是，我正在获取选项卡索引，例如第一个选项卡的索引为 0，第二个选项卡的索引为 1 等。接下来，如果 selectedTabIndex 为例如 0，我将使用 switch case 检查我的代码，并且我我将此值推送到我的对象属性“区域”，因此它看起来像区域：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具有索引 1zone:1值的选项卡等？也许我应该为特定区域使用单独的对象数组？谢谢你。

标签： arraysangularobjectngfor

解决方案

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

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

在 ngfor 中使用此方法。

推荐阅读