在 mat table angular 中显示类别名称而不是 id

Question

您好，我使用角材料垫表来显示来自 api 的数据。我使用另一个 api 来处理类别。 我有两个模型，issues 和 categories。我暂时显示类别的ID。 我需要显示相应的category 名称而不是它的id。

有什么想法吗？

我的模型

export class Issue {
  IssueID: string;
  IssueTitle: string;
  IssueContent: string;
  CategoryID: number;
}


export class IssueCategory {
  public CategoryID: number;
  public CategoryName: string;
}

我的 html

...
  <ng-container matColumnDef="CategoryTitle">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Category</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.categoryID}}</mat-cell>
  </ng-container>
...

编辑

我的 getAllIssues()

CategoryArray: TicketCategory[] = [];

getAllIssues(): void {
this.httpClient.get<Ticket[]>(this.API_URL).subscribe(data => {
this.dataChange.next(data);      

  this.data.map(issue => ({

    category: this.CategoryArray.find(category => category.CategoryID === issue.CategoryID)
  }));
  }
 }

谢谢！

Answer 1

作为最简单的方法，您可以使用已经组合的数据作为数据源，例如：

// my-component.ts

@Component(...)
export class MyComponent {
  readonly categories: IssueCategory[] = [{
    CategoryID: 1,
    CategoryName: "First Category"
  }, {
    CategoryID: 2,
    CategoryName: "Second Category"
  }];

  readonly issues: Issue[] = [
    {IssueID: "first", IssueTitle: "First Issue", IssueContent: "first issue content", CategoryID: 1},
    {IssueID: "second", IssueTitle: "Second Issue", IssueContent: "second issue content", CategoryID: 2}
  ];

  readonly dataSource = this.issues.map(issue => ({
    title: issue.IssueTitle,
    content: issue.IssueContent,
    category: this.categories.find(category => category.CategoryID === issue.CategoryID)
  }));
}

或者您可以创建一个pipe，它将类别ID 转换为名称。在这种情况下，请记住您应该将管道包含在模块的声明数组中。

// category-by-id.pipe.ts

@Pipe({
  name: 'categoryById'
})
export class CategoryByIdPipe implements PipeTransform {
  transform(categoryId: number, categories: IssueCategory[]): string {
    const category = categories.find(category => category.CategoryID === categoryId);
    return category ? category.CategoryName : "";
  };
}

<!-- my-component.html -->

...
  <ng-container matColumnDef="category">
    <mat-header-cell *matHeaderCellDef> Category </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.CategoryID | categoryById:categories}} </mat-cell>
  </ng-container>
...

StackBlitz 两个例子。希望对你有帮助。

---

Here is 另一个使用MatTableDataSource的例子