如何在Angular的一组迭代JSON输出中迭代一个数组？答案

【问题标题】：How to iterate an Array inside an iterating set of JSON outputs in Angular?如何在Angular的一组迭代JSON输出中迭代一个数组？
【发布时间】：2020-07-28 05:22:54
【问题描述】：

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

这是前端的数据

address1: "No 400,"
address2: "Beach Road,"
city: "Colombo"
contacts: Array(2)
0: {contactNo: "0712244587"}
1: {contactNo: "0775469823"}
length: 2
__proto__: Array(0)
email: "kingsbury@gmail.com"
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 : shangrila@gmail.com

我是 Angular 的新手，但仍在努力熟悉事物。提前谢谢你！

【问题讨论】：

标签： angular loops iteration output

【解决方案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>

【讨论】：

【解决方案2】：

您不需要在 *ngFor 定义中进行插值。您可以直接访问该属性。 micro-syntax *ngFor 已扩展为属性绑定 [ngForOf]="hotel.contacts"，因此它已被评估为表达式。

试试下面的

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

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

【讨论】：

【解决方案3】：

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

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

原因

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

【讨论】：