如何使用HTML代码中的预定义参数映射HTTP调用的响应参数 - Angular 5

Question

我处于这样的情况,我写了如下的HTML代码

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

我假设http调用的响应参数如下(在ItemComponent中)

let response = [{
    id: 1, 
    name: 'Item 1'
}, {
    id: 2, 
    name: 'Item 2'
}]

但我正在逐渐从响应API如下

response = [{
    item_id: 1, 
    item_name: 'Item 1'
}, {
    item_id: 2, 
    item_name: 'Item 2'
}]

由于该响应,我的HTML没有得到渲染.有没有办法用我们自己的预定义参数映射原始响应参数.

因此,如果API人员更改他们发送的响应参数,我不需要多次更改HTML中的绑定.

注意: Angular 5

先感谢您 :-)

Answer 1

您只需映射API调用的响应即可.像这样的东西

const response = [{
    item_id: 1, 
    item_name: 'Item 1'
}, {
    item_id: 2, 
    item_name: 'Item 2'
}];

const mappedResponse = response.map(item => ({
   id: item.item_id,
   name: item.item_name
}));

console.log(mappedResponse);