Question

让我们说我有一个返回对象列表的服务。

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

在Web应用程序中，我想将状态映射到可读文本。我会将地图放在组件中，然后在模板中使用它。

组件

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>

我不确定这是最好的策略。它既简单又容易，但是我更喜欢一种与模板（视图）而不是组件（控件）更相关的方法。

我可以想到一个可以翻译的管道，但是也许这对于这个简单的问题来说是一个过大的杀伤力。

感谢您的建议和评论。

Answer 1

您可以创建一个像这样的简单对象：

TS：

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

HTML：

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

或创建带有开关盒的简单函数，该开关盒将返回全文。

尝试这样：

HTML：

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

TS：

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

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

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

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

1 个答案: