Angular 前端 - 如何在前端更改从后端获得的值

Question

我最近开始 Angular，但一直被这个问题所困扰。

因此，当前端加载页面时，它会执行 GET 并获取以下值：

getAll(fetch_id: string): Subject<Element[]> {
this.dataSource.getData(fetch_id).subscribe((elements) => {
  this.elements = elements.map((element) => ({
    id: element.element_id.toString(),
    name: element.element_name,
    fetch_method: element.fetch_method_id,
    created: element.created_at,
  }));
  this.elements$.next(this.elements);
});
return this.elements$;

我的 HTML 显示如下：

<td
    class="pointer"
    mat-cell
    *matCellDef="let element"
    [routerLink]="getFetchUrl(element)"
  >
    {{ element.fetch_method }}
  </td>

我的问题是：fetch_method 将 return 1,2 或 3，我必须在前端部分以不同方式表示（如果1,前端必须显示"Automatic",如果是2,则必须显示"Manual",如果是3,则必须显示"Both").

目前，我的前端只显示 1,2 或 3。

我尝试搜索是否可以在某处插入和 IF-ELSE 语句，但没有找到任何有用的信息。如果有任何建议，我将不胜感激！

Answer 1

您可以像这样使用 enum：

ts 文件:

export enum fetchMethodEnum {
  Automatic = 1,
  Manual = 2,
  Both = 3,
}

您可以为枚举创建单独的文件或在 @component

之前添加到 ts 文件中

并在 class 中将枚举绑定到一个变量：

fetchMethod = fetchMethodEnum;

html 文件:

  <td  class="pointer" mat-cell *matCellDef="let element"
       [routerLink]="getFetchUrl(element)"
  >
    {{ fetchMethod[element.fetch_method] }}

基于 element.fetch_method id 显示枚举。

Angular 前端 - 如何在前端更改从后端获得的值

Angular Frontend - How do I change a value I got from backend in frontend

html

angular

angularjs

typescript