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

Question

我的情况是，我写了如下HTML代码

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

我假设http调用的响应参数如下(在项目组件中(

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 中的绑定。

注意：角度 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);