отображать название категории вместо id в таблице mat angular

Question

Здравствуйте, я использую таблицу матов материалов angular, чтобы отображать мои данные из api. Я использую другой API для обработки категорий. У меня две модели, выпуски и категории . На данный момент я отображаю 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>
...

РЕДАКТИРОВАТЬ

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

Или вы можете создать канал , который преобразует идентификатор категории в имя . В этом случае имейте в виду, что вы должны включить свой канал в массив объявлений модуля.

// 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 с обоими примерами. Надеюсь, это вам поможет.

---

Вот еще один пример, в котором используется MatTableDataSource