Angular 角度：将字符串从组件映射到模板

假设我有一个返回对象列表的服务

[
  {item: 'box', price: 10, state: 'N'},
  {item: 'toy', price: 15, state: 'U'},
  {item: 'ink', price: 20: state: 'O'}
]

在webapp中，我喜欢将状态映射到可读文本。 我会在我的组件中放置一个映射，并在模板中使用它

组成部分

模板

我不确定这是最好的策略。这很简单，但我更喜欢一种与模板（视图）而不是控件（控件）更相关的方式

我能想到一个可以翻译的管道，但对于这个简单的问题来说，这可能是一个过分的解释

---

感谢您的建议和评论。

您可以创建如下简单对象：

TS:

HTML:

---

管道非常适合将数据N、U格式化为其他新的库存数据等。。而且它非常容易创建，所以我不会称之为过分。只需首先将组件中的数组处理为模板中所需的结构，即进行映射，然后使用该数据进行显示。要实现管道，我必须对管道中的映射进行同样的思考。我同意，如果转换中有更多的逻辑，而不是简单的映射，那将是完美的。对于第二种方法，如果在源/目标数组中添加了新项，则需要修改代码！这或多或少与我在问题中已经采用的方法相同。

map = new Map ([
 [ "N", "new in stock" ],
 [ "U", "used but ok" ],
 [ "O", "out of stock" ]
]);

<tr *ngFor="let d of data">
    <td>{{ d.item }}</td>
    <td>{{ map.get (d.state) }}</td>
</tr>

  map = {
    N: "new in stock",
    U: "used but ok",
    O: "out of stock"
  }

<tr *ngFor="let d of data">
    <td>{{ d.item }}</td>
    <td>{{ map[d.state] }}</td>
</tr>

<tr *ngFor="let d of data">
    <td>{{ d.item }}</td>
    <td>{{ getFullText(d.state) }}</td>
</tr>

  getFullText(abb:string) {
    switch(abb) {
      case "N":
      return "new in stock";

      case "U":
      return "used but ok";

      case "O":
      return "out of stock";
    }
  }