如何在Angular中的JSON输出迭代集中迭代数组

Question

我有一个保存酒店数据的数据库表。一家酒店可以有多个联系人号码，并使用联系人号码的组合表来实现。我想显示现有酒店的所有信息。我的输出显示除联系人号码之外的所有其他内容。请告诉我一种迭代并显示每家酒店联系电话的方法。

这是前端的数据

address1: "No 400,"
address2: "Beach Road,"
city: "Colombo"
contacts: Array(2)
0: {contactNo: "0712244587"}
1: {contactNo: "0775469823"}
length: 2
__proto__: Array(0)
email: "[e-mail]"
hid: 1
hotelName: "Kingsbury"
state: "Western"
zipCode: "10000"

.html代码

<div
class="card"
style="height: 750px;"
*ngFor="let hotel of availableHotels"
>
<div class="card-img-top">
<div class="card-body">
<img
style="width: 15cm; height: auto;"
src="../../assets/images/car2.jpg"
class="card-img"
id="img"
alt="..."
/>
<h2 style="margin-top: 20px;">Hotel : {{ hotel.hotelName }}</h2>
<h4 >{{ hotel.city }}</h4>
<p class="font-weight-bold">Address : {{hotel.address1}}</p>
<p class="font-weight-bold">Contact : </p>
<div *ngFor="let contact of {{hotel.contact}};let i=index">
<p>{{contact.contactNo}}</p>
</div>

<p class="font-weight-bold">Email : {{hotel.email}}</p>

</div>
</div>
</div>

.ts代码

export class TestcComponent implements OnInit {
availableHotels: Array<any>;
hotel: ReplaySubject<String> = new ReplaySubject();

constructor(
private contractService: ContractService
) { }
ngOnInit(){
this.contractService.findAllHotels().subscribe((data) => {
console.log(data);
this.availableHotels = data;
data.forEach((item) => {
this.hotel.next(item);

});

});
}
}

输出显示方式：

Hotel : Shangri-La
Colombo 10
Address : No 400,
Contact :
Email : [e-mail]

我对棱角分明还是个新手，但仍在努力熟悉事物。提前谢谢！

Answer 1

更改此

<div *ngFor="let contact of {{hotel.contact}};let i=index">
<p>{{contact.contactNo}}</p>
</div>

至

<div *ngFor="let contact of hotel?.contact; let i=index;">
<p>{{contact?.contactNo}}</p>
</div>

Answer 2

在*ngFor定义中不需要插值。您可以直接访问该属性。微语法*ngFor被扩展为属性绑定[ngForOf]="hotel.contacts"，因此它已经被计算为一个表达式。

尝试以下

<div *ngFor="let contact of hotel?.contacts; let i=index">
<p>{{ contact.contactNo }}</p>
</div>

^{我使用了hotel.contacts，因为在您显示的后端数据中看不到hotel.contact}

Answer 3

您使用了错误的语法，请遵循以下代码-

<div *ngFor="let contact of hotel?.contact;let i=index">
<p>{{contact?.contactNo}}</p>
</div>

原因

不能将插值语法{{}}与内置指令(如*ngFor(一起使用，因为在这些情况下会计算左侧的方程式。