时间戳

首页 > 解决方案 > Angular：将字符串从组件映射到模板

angular - Angular：将字符串从组件映射到模板

问题描述

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

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

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

零件

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>

我不确定那是最好的策略。它简单易行，但我更喜欢与模板（视图）而不是组件（控件）相关的方式。

我可以想到一个可以翻译的管道，但对于那个简单的问题来说，这可能有点过头了。

感谢您的建议和意见。

标签： angular

解决方案

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

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>

或者创建一个带有 switch case 的简单函数来返回全文。

试试这样：

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";
    }
  }

推荐阅读