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

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&date=05-07-2021

Answer 1

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

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

与 HTML 期望的正常工作不符
甚至不是正确的类型，这可能应该是 {}（空对象）或 null

你应该：

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

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

Angular: Problem accessing array of objects in *ngFor loop while string interpolation displays data in html but with error ctx is undefined in console

angular

ngfor

angular12