NativeScript - 从 TabView-ng 按选项卡筛选列表视图数据

Question

如何按需求仅显示与特定房间相关的数据？

在我的 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>

我的类组件使用Angular核心和我的个人FileReader类来读取和返回JSON数据。见下文：

export class DataItem {
constructor(public name: string, public content: string) {}
}
export class TableItem {
constructor(public number: number) {}
}
@Component({
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
// Your TypeScript logic goes here
public roomsList: Array<DataItem>;
public tabSelectedIndex: number;
public tablesList: Array<TableItem>;
private loadRooms(roomsList: Array<DataItem>) {
this.tabSelectedIndex = (!!roomsList.length) ? 1 : 0;
this.roomsList = roomsList.map(item => new DataItem(item.name, item.content));
}
private loadTables(tablesList: Array<TableItem>) {
this.tablesList = tablesList.map(item => new TableItem(item.number));
}
private loadInterface() {
FileReader
.readJSON('./config/interface.json')
.then((output: Array<object>) => {
const roomsList = output['rooms'];
const tablesList = output['tables'];
this.loadRooms(roomsList);
this.loadTables(tablesList);
});
}
constructor() {}
ngOnInit() {
this.loadInterface();
}
}

引用：

• NativeScript - TabView-ng
• TabView-ng NativeScript 中的动态选项卡
• 在 NativeScript 中使用 angular2 过滤列表视图

Answer 1

我最近解决了创建一个新数组 [] 并使用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;
}

并将tablesList更改为"列表视图上的tables"。