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

Question

I have a following problem with showing and saving data to array of objects. I have a form with 5 tabs. I can switch between those tabs and show different data in table. I have also a possibility to add some new data to specific tab table. I have a form which is called "Additional data form". Form is working fine, once I add some data to this form and click on submit, I'm pushing object with those data to my array which is called arrayData . I'm using *ngFor for showing data: <tr class="body-row" *ngFor="let position of arrayData; index as i;">

The problem is, I'm pushing those objects to array which is global (and it works) but I would like to show those data only on specific tab table (I would also like to add new form on specific tab). What I would like to achieve is to push those data to array but in *ngFor directive, I would like to show only data with specific zone index. What I do is, I'm getting tab index for example first tab is with index 0, second tab is with index 1 etc. Next, I'm checking in my code with switch case if selectedTabIndex is for example 0, and I'm pushing this value to my object property "zone" so it will look like zone: 0. In this case I have an object which looks like this: {zone: 0, data1: "33", data2: "4", data3: "5", data4: true} If I push data on tab with index 2, I'm setting this information to my object so zone:2 will be added to my next object. My array looks like this:

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

etc. depending on witch tab I posted my form.

Is there a quick solution for showing data on tab index 0, objects with zone:0 value, on tab with index 1 zone:1 value etc.? Maybe I should use separate arrays of objects for specific zones? Thank you.

Answer 1

=You can filter your array if I understand your problem well.

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

Use this method in ngfor.