Angular 7 - 更改从数据库接收到的数据的值

Question

在 app.component.ts 我通过 API 接收数据：

export class AppComponent implements OnInit{

 constructor(private http: HttpClient){}
 items: Object;
  getApi(){
   return this.http.get("https://reqres.in/api/user");
  }
ngOnInit(){
  this.getApi().subscribe( data => {
    this.items = data
    console.log(this.items)
  })
 }
}

在我的 app.component.html 中，我输出了该数据：

<ul *ngIf="items">
   <li *ngFor="let item of items.data">
      {{ item.id }} {{ item.name }} {{ item.year }}
   </li>
</ul>

我的问题是，是否可以使用连接到 id 整数的字符串来更改 id。 例如 id = 1 => 1 表示字符串“一”，id = 2 => 表示字符串“二”。

遗憾的是，我不知道如何将接收到的数据的值更改为新值。

我希望清楚我想要实现的目标，如果没有，请随时询问！

我希望你能帮助我。谢谢！

Answer 1

如果您知道要映射的所有值，则可以在组件中创建一个字典来处理映射。

myMap = {
    1: "one",
    2: "two"
};

然后在你的 HTML 中

<ul *ngIf="items">
   <li *ngFor="let item of items.data">
      {{ myMap[item.id] }} {{ item.name }} {{ item.year }}
   </li>
</ul>

Answer 2

number-to-words 可以解决问题。您不必担心自己对名称进行编码。

var converter = require('number-to-words');

ngOnInit(){
  this.getApi().subscribe( data => {
    this.items = data;
    this.items.forEach((item, index) => {
        this.items[index].id = converter.toWords(item.id);
    })
  })
 }