NativeScript-通过TabView-ng中的选项卡过滤ListView数据 [英] NativeScript - Filter a ListView data by tabs from TabView-ng
本文介绍了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>
我的类使用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();
}
}
参考文献:
解决方案
我最近解决了创建新数组[]并使用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上将tablesList更改为tables.
How can I show up by demand only data related by specific room?
Below my Json data:
{
"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
}
]
}
My template:
<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>
My class Component using Angular core and my personal FileReader class to read and return a JSON data. See it below:
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();
}
}
References:
- NativeScript - TabView-ng
- Dynamic tabs in TabView-ng NativeScript
- Filter ListView using angular2 in NativeScript
解决方案
I recent solved that creating a new array [] and increment using map() + filter() + push() the filtered into the new array.
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;
}
And change the tablesList to tables on ListView.
这篇关于NativeScript-通过TabView-ng中的选项卡过滤ListView数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
