javascript - 如何使用我们在 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 未得到呈现。有什么方法可以将原始响应参数映射到我们自己的预定义参数。

这样我就不需要多次更改 HTML 中的绑定(bind)，如果 API 人员更改了他们发送的响应参数。

注意: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);