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

Posted 2023-03-13

【中文标题】Angular Frontend - 如何更改从前端获得的值

【英文标题】：Angular Frontend - How do I change a value I got from backend in frontend

【发布时间】：2021-12-29 08:47:22

【问题描述】：

我最近开始使用 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 将返回 1,2 或 3，我必须在前端部分以不同方式表示（如果为 1，则前端必须显示“自动”，如果为 2，必须显示“Manual”，如果是 3，则必须显示“Both”）。

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

我尝试搜索是否可以在某处插入和 IF-ELSE 语句，但没有发现任何帮助。如有任何建议，我将不胜感激！

【问题讨论】：

那么如果我理解正确的话，根据element.fetch_method的值，我们需要显示1,2还是BOTH？

后端 API 将返回 1,2 或 3。根据返回的值，前端部分必须显示“自动”、“手动”或“两者”。

【参考方案1】：

你可以像这样使用枚举：

ts 文件：

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

您可以为枚举创建单独的文件或在@component之前添加ts文件

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

fetchMethod = fetchMethodEnum;

html 文件：

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

基于element.fetch_method id 显示为枚举。

【讨论】：

感谢您的回复。非常有用的方法:) 刚刚得到另一个问题。我在我的 ts 文件中实现了枚举部分，而不是单独的。当我尝试在我的 HTML 中调用 fetchMethod 时，会导致编译错误：“类型 'ElementViewComponent'（我的 HTML 文件）上不存在属性 'fetchMethod'”。我需要在某处导入它吗？

@user17447487 我忘了说，你需要将枚举绑定到一个变量，所以在你的类中的 ts 文件中添加 fetchMethod = fetchMethod;（或选择更好的变量名:)）。

非常感谢您的帮助。得到它的工作。投票赞成您的回复，但说我没有足够的代表（我是这个网站的新手），但它被保存了。尽管如此，还是感谢您的帮助:)