Angular 在mat表格中显示类别名称而不是id

您好，我使用angular material mat table来显示api中的数据。我使用另一个api来处理类别。 我有两个模型，问题和类别。此时，我显示类别的ID。 我需要显示相应的类别名称，而不是其id

有什么想法吗

我的车型

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

导出类问题{
IssueID：字符串；
IssueTitle：字符串；
IssueContent:字符串；
类别ID：编号；
}
出口类发行类别{
公共类别ID：编号；
公共类别名称：字符串；
}

我的html

。。。
类别
{{row.categoryID}
...

编辑

我的getAllIssues（）

CategoryArray:TicketCategory[]=[]；
getAllIssues（）：void{
this.httpClient.get（this.API\u URL）.subscribe（数据=>{
this.dataChange.next（数据）；
this.data.map（问题=>({
category:this.CategoryArray.find（category=>category.CategoryID===issue.CategoryID）
}));
}
}

---

谢谢！

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

//my-component.ts
@组件（…）
导出类MyComponent{
只读类别：IssueCategory[]=[{
类别：1，
类别名称：“第一类”
}, {
类别：2，
类别名称：“第二类”
}];
只读问题：问题[]=[
{IssueID:“第一期”，IssueTitle:“第一期”，IssueContent:“第一期内容”，类别ID:1}，
{IssueID:“第二期”，IssueTitle:“第二期”，IssueContent:“第二期内容”，类别ID:2}
];
只读数据源=this.issues.map（issue=>({
标题：issue.IssueTitle，
内容：issue.IssueContent，
类别：this.categories.find（category=>category.CategoryID===issue.CategoryID）
}));
}

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

//category-by-id.pipe.ts
@烟斗({
名称：“categoryById”
})
导出类CategoryBydPipe实现了PipeTransform{
转换（categoryId:number，categories:IssueCategory[]）：字符串{
const category=categories.find（category=>category.CategoryID===CategoryID）；
退货类别？category.CategoryName:；
};
}

...
类别
{{element.CategoryID | categoryById:categories}
...

两个例子都有，希望对你有所帮助

---

---

另一个使用

MatTableDataSource

的示例，我将创建一个组合类型，您可以在其中填充category对象而不是id，并将该组合类型用于您的表格感谢您的回复@Valerin。我尝试从第一种方法中调整您的代码。我已经有了一个数据源，从中我可以从api中填充mat表格。如何我可以添加第二个吗？@touinta你可以添加更多关于这个问题的细节吗？为什么不将第一个数据源替换为更新的数据源呢？我需要我的初始数据源，因为在那里我做了很多工作，如过滤、排序等。我可以尝试添加你的代码吗？…这很难，但我会尝试一下…@touinta好的，如果你有一些，请告诉我麻烦。我更新了我的问题。我添加了我的服务功能，在其中我添加了一些您的代码。如何通过此功能调用my component.html中的类别名称？可能吗？谢谢