无法将数据导入 UI，但获得了控制台

Question

这是我在控制台中获得的输出，但我无法在 UI 中显示它

我想显示客户地址的东西。但是 api 的编写方式类似于将地址表数据映射到客户表中。因此，我得到的输出就像客户表中的地址列表

因此，如果我尝试显示客户表中的地址，我认为绑定不起作用。

谁能解决这个问题？

提前谢谢。

使用的角度文件如下。 地址.服务.ts

@Injectable()
export class AddressService {
selectedAddress : Address
constructor(private http: Http) { }
getCustomerAddress(){
return this.http.get('http://localhost:49422/api/customer/4/profile');
}
}

地址.组件.html

<div class="col-md-6">
<button type="button" class="btn btn-lg btn-block btn-primary" style="width: auto" (click)="OnCustomerAddressClick()">
GetCustomerAddress
</button><br>

<table class="table table-sm table-hover">
<tr *ngFor="let address of addressList">
<td>
{{address.Firstname}} - {{address.Lastname}}
</td>
<td>
{{address.Address1}},{{address.Address2}}
</td>
<td>
{{address.City}},{{address.Postcode}}
</td>
</tr>               
</table>              
</div>
</div>

address.component.ts

export class AddressComponent implements OnInit {
singleAddress: Address
addressList: Address[];
errorMessage: string ="";
constructor(private addressService: AddressService, private http :HttpClient) { }
ngOnInit() {
}
OnCustomerAddressClick(){
this.addressService.getCustomerAddress()
.subscribe(
(response:Response) => {
this.addressList = response.json();
console.log(this.addressList);
},
(error) => {
this.errorMessage = "Unable to get Customer Address";
});
}
}

Answer 1

问题是你的response是一个对象。并且您正在将response分配给this.addressList.所以this.addressList包含一个对象而不是数组。

但您希望迭代地址。

所以看到这里，我正在Address分配给this.addressList.

this.addressList = response.json().Address;

更改address.component.ts中的函数OnCustomerAddressClick()，如下所示。

OnCustomerAddressClick(){
this.addressService.getCustomerAddress()
.subscribe(
(response:Response) => {
this.addressList = response.json().Address;
console.log(this.addressList);
},
(error) => {
this.errorMessage = "Unable to get Customer Address";
});
}