Angular NativeScript-按TabView ng中的选项卡筛选ListView数据

我如何按特定房间的相关数据按需显示

下面是我的Json数据：

{
  "rooms": [
    {
      "id": 1,
      "name": "Room 01",
      "content": "Content 01"
    },
    {
      "id": 2,
      "name": "Room 02",
      "content": "Room 02"
    }
  ],
  "tables": [
    {
      "id": 1,
      "number": 1,
      "roomId": 1
    },
    {
      "id": 2,
      "number": 2,
      "roomId": 1
    },
    {
      "id": 3,
      "number": 3,
      "roomId": 2
    }
  ]
}

我的模板：

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000">
  <ng-container *ngFor="let tab of roomsList">
    <StackLayout *tabItem="{title: tab.name}">
      <ListView [items]="tablesList">
        <ng-template let-item="item">
          <Label [text]="item.number"></Label>
        </ng-template>
      </ListView>
    </StackLayout>
  </ng-container>
</TabView>

参考资料：

---

我最近解决了创建一个新数组[]并使用

map（）

+

filter（）

+

push（）

将已过滤的数据添加到新数组中的问题

private filteredRooms(roomsList, tablesList) {
    const filteredRooms = [];

    roomsList.map(room => {
      const filteredTables = tablesList.filter((t: TableItem) => t.roomId === room.id);
      const filteredRoom = room;

      filteredRoom['tables'] = filteredTables;

      filteredRooms.push(filteredRoom);
    });

    return filteredRooms;
    }

并将ListView上的

tables列表更改为
tables

private filteredRooms(roomsList, tablesList) {
    const filteredRooms = [];

    roomsList.map(room => {
      const filteredTables = tablesList.filter((t: TableItem) => t.roomId === room.id);
      const filteredRoom = room;

      filteredRoom['tables'] = filteredTables;

      filteredRooms.push(filteredRoom);
    });

    return filteredRooms;
    }