如何使用 Angular 中的 mat-tab 根据所选选项卡过滤数据答案

【问题标题】：How to filter the data based on selected tab using mat-tab in Angular如何使用 Angular 中的 mat-tab 根据所选选项卡过滤数据
【发布时间】：2021-09-09 17:56:00
【问题描述】：

我试图弄清楚如何使用mat-tabhere 根据所选选项卡的值过滤数据。例如，我想要一个包含三个城市选项卡的选项卡面板：ALL、LA、SF。如果用户点击ALL标签，它将显示所有使用mat-cardhere的数据。如果用户选择LA，它将只显示洛杉矶等地的人。

到目前为止，我只能显示所有数据而无需过滤。这是我所做的最少代码：

<mat-card *ngFor="let user of users">
  <mat-card-header>
    <mat-card-title>{{user.id}}</mat-card-title>
  </mat-card-header>
  <mat-card-content>{{user.city}}</mat-card-content>
</mat-card>

以下是数据示例：

const Users = 
{
  "users": [
    {
      "id": "person1",
      "first_name": "Mike",
      "last_name": "Patty",
      "city": "LA"
    },
    {
      "id": "person2",
      "first_name": "Mike2",
      "last_name": "Patty2",
      "city": "LA"
    },
    {
      "id": "person3",
      "first_name": "Mike3",
      "last_name": "Patty3",
      "city": "SF"
    },
    {
      "id": "person4",
      "first_name": "Mike4",
      "last_name": "Patty4",
      "city": "SF"
    }
  ]
}

如何显示响应标签的数据？感谢您的建议和帮助。

【问题讨论】：

您可以使用 selectedTabChange 输出事件并运行您的过滤器

标签： html angular typescript frontend

【解决方案1】：

好吧，“正确”的方法可能是使用Pipes，但我个人觉得这对于简单的应用程序来说有点笨拙。相反，我喜欢KISS 并做这样的事情：

html:

<button (click)='cityFilter = "LA"'>Los Angeles</button>

<div *ngFor="let user of getUsers(userlist.users)">
    {{user.first_name}}
    {{user.last_name}}
    {{user.city}}
  </div>

ts：

cityFilter: string;
userlist: any = {
    users: [
      {
        id: 'person1',
        first_name: 'Mike',
        ......

getUsers(users):any[] {
  if (!this.cityFilter) return users;
  return users.filter(u => u.city === this.cityFilter);
}

例如：https://stackblitz.com/edit/angular-ivy-8s3qfe?file=src%2Fapp%2Fapp.component.ts

【讨论】：

【解决方案2】：

对于每个选项卡更改，您可以获得selectedTabChange 事件。通过此事件，您将过滤您的用户。

在 html 文件中 -

<mat-tab-group (selectedTabChange)="tabChanged($event)">
  <mat-tab *ngFor="let tabLabel of matTabLabels" label="{{tabLabel}}">
    <mat-card *ngFor="let user of selectedUsers">
      <mat-card-header>
        <mat-card-title>{{user.id}}</mat-card-title>
      </mat-card-header>
      <mat-card-content>{{user.city}}</mat-card-content>
    </mat-card>
  </mat-tab>
</mat-tab-group>

在 .ts 文件中 -

  selectedUsers: any;
  matTabLabels = ['ALL', 'LA', 'SF'];

  ngOnInit() {
    this.selectedUsers = this.Users.users;
  }

  tabChanged(event: any) {
    console.log(event);
    if (event.index != 0) {
      const filterText = event.tab.textLabel;
      this.selectedUsers = this.Users.users.filter((user: any) => {
        return user.city === filterText;
      });
      console.log(this.selectedUsers);
    } else {
      this.selectedUsers = this.Users.users;
    }
  }

工作 stackBlitz - https://stackblitz.com/edit/angular-qehpkb?file=src/app/tab-group-basic-example.ts

【讨论】：

考虑使用 matTabContent 来延迟加载内容。 mat-chip 也可能是更好的选择。