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

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

1 个答案: