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表示字符串“ one”，id = 2 =>表示字符串“ two”。

可悲的是，我不知道如何用新值更改接收到的数据的值。

我希望很清楚我要实现的目标，如果没有，不要犹豫，要问！

希望您能帮助我。谢谢！

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

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

2 个答案: