Angular:当字符串插值在html中显示数据时，访问*ngFor循环中的对象数组时出现问题，但错误是控制台中未定义c

Question

。HTML文件

<span class="total">Available Vaccines:</span>
{{ vaccinationData?.sessions[0]?.center_id}} // This displays data on html with               //ctx.vaccinationData.sessions is undefined
<ng-container *ngFor="let data of vaccinationData.sessions" > <!-- This does not loop -->
<mat-card class="card">
<mat-card-header>
<!-- <mat-card-title>{{ data?.center_id }}</mat-card-title>
<mat-card-subtitle>{{ data?.address }}</mat-card-subtitle> -->
</mat-card-header>
</mat-card>
</div>
</ng-container>

.ts文件

import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ServicesComponent } from '../../models/services/services.component';

@Component({
selector: 'vaccine-available-slot-view',
templateUrl: './available-slot-view.component.html',
styleUrls: ['./available-slot-view.component.scss'],
/* changeDetection: ChangeDetectionStrategy.OnPush, */
})
export class AvailableSlotViewComponent {

constructor(private apiData: ServicesComponent){
this.apiData.getVaccineData().subscribe(data=>{
console.warn(data);
this.vaccinationData=data;
console.warn(this.vaccinationData?.sessions);
})
}
vaccinationData: any =[];
}

Api数据https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=141&日期=2021年7月5日

Answer 1

假设您从API接收的数据结构与您在HTML中编写的数据结构匹配，请记住，以异步方式调用API需要一些时间。

在API的数据可用之前，vaccinationData属性设置为[]，即：

• 与HTML期望的正常工作不匹配
• 甚至不是正确的类型，这可能是{}(空对象(或null

您应该：

• 使用Typescript正确键入数据，但将变量定义为any会破坏整个目的
• 在HTML中，添加*ngIf以仅在数据可用时显示块(直接使用数据作为条件或附加布尔标志(