如何在NativeScript的TabView-ng中按标签筛选指定房间的ListView数据？

我来帮你搞定这个问题！要让每个Tab页只展示对应房间的桌子数据，咱们可以按以下步骤调整代码：

1. 更新数据模型类，补充关联字段 #

首先，咱们需要给DataItem和TableItem添加上必要的关联ID，这样才能建立房间和桌子的对应关系：

export class DataItem {
  // 新增id字段，对应房间的唯一标识
  constructor(public id: number, public name: string, public content: string) {}
}

export class TableItem {
  // 新增roomId字段，关联所属房间的id
  constructor(public number: number, public roomId: number) {}
}

2. 调整组件逻辑，保存完整的原始数据 #

原来的代码直接把所有桌子数据赋值给tablesList，现在咱们需要保存所有桌子的完整数据，方便后续过滤。修改组件类的属性和方法：

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
  public roomsList: Array<DataItem>;
  public tabSelectedIndex: number;
  // 保存所有桌子的完整数据，用于后续过滤
  public allTables: Array<TableItem>;

  private loadRooms(roomsList: Array<any>) {
    // Tab索引从0开始，所以这里调整为0（如果有房间的话）
    this.tabSelectedIndex = roomsList.length ? 0 : -1;
    // 映射时带上房间id
    this.roomsList = roomsList.map(item => new DataItem(item.id, item.name, item.content));
  }

  private loadTables(tablesList: Array<any>) {
    // 保存所有桌子数据，包含roomId
    this.allTables = tablesList.map(item => new TableItem(item.number, item.roomId));
  }

  private loadInterface() {
    FileReader
      .readJSON('./config/interface.json')
      .then((output: any) => {
        const roomsList = output['rooms'];
        const tablesList = output['tables'];
        this.loadRooms(roomsList);
        this.loadTables(tablesList);
      });
  }

  constructor() {}
  ngOnInit() {
    this.loadInterface();
  }
}

3. 在模板中实现动态过滤（两种可选方式） #

方式一：直接使用数组filter方法（快速实现） #

修改模板中的ListView，让它只显示当前Tab对应房间的桌子：

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000">
  <ng-container *ngFor="let tab of roomsList">
    <StackLayout *tabItem="{title: tab.name}">
      <!-- 过滤出roomId等于当前tab.id的桌子 -->
      <ListView [items]="allTables.filter(table => table.roomId === tab.id)">
        <ng-template let-item="item">
          <Label [text]="item.number"></Label>
        </ng-template>
      </ListView>
    </StackLayout>
  </ng-container>
</TabView>

方式二：使用自定义管道（性能更优，适合大数据量） #

如果你的桌子数据比较多，推荐用自定义管道来过滤，避免每次渲染都重复执行filter方法：

首先创建一个过滤管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterByRoom' })
export class FilterByRoomPipe implements PipeTransform {
  transform(tables: TableItem[], roomId: number): TableItem[] {
    // 如果没有数据直接返回空数组
    if (!tables) return [];
    // 过滤出对应房间的桌子
    return tables.filter(table => table.roomId === roomId);
  }
}

记得在你的Angular模块中声明这个管道：

import { NgModule } from '@angular/core';
import { FilterByRoomPipe } from './filter-by-room.pipe';

@NgModule({
  declarations: [FilterByRoomPipe],
  exports: [FilterByRoomPipe]
})
export class PipesModule {}

然后在模板中使用这个管道：

<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000">
  <ng-container *ngFor="let tab of roomsList">
    <StackLayout *tabItem="{title: tab.name}">
      <!-- 使用自定义管道过滤数据 -->
      <ListView [items]="allTables | filterByRoom: tab.id">
        <ng-template let-item="item">
          <Label [text]="item.number"></Label>
        </ng-template>
      </ListView>
    </StackLayout>
  </ng-container>
</TabView>

这样调整后，每个Tab页就只会显示对应房间的桌子数据啦！

内容的提问来源于stack exchange，提问作者Francis Batista