NativeScript - 通过 TabView-ng 中的选项卡过滤 ListView 数据 [英] NativeScript - Filter a ListView data by tabs from TabView-ng

问题描述

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

How can I show up by demand only data related by specific room?

在我的 Json 数据下方:

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
    }
  ]
}

我的模板:

<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 数据.请看下面:

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();
  }
}

参考文献:

• NativeScript - TabView-ng
• TabView-ng NativeScript 中的动态标签
• 在 NativeScript 中使用 angular2 过滤 ListView

推荐答案

我最近解决了创建一个新数组 [] 并使用 map() + filter() 递增的问题> + push() 过滤到新数组中.

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;
    }

并将 ListView 上的 tablesList 更改为 tables.

And change the tablesList to tables on ListView.

这篇关于NativeScript - 通过 TabView-ng 中的选项卡过滤 ListView 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！