可以通过折角2 HTML文件* ngFor我的界面元素不循环播放

Question

我从API通过我的接口中获取数据，但无法显示与*ngFor指令在HTML文件中的帮助下这些数据。

下面是我的界面命名LabRateInterface

export interface second1 {
  user: number;
}

export interface third1 {
  user: number;
}

export interface Healthpackages {
  second: second1;
  third: third1;
}

export interface PrePaid {
  block_on_zero_balance: boolean;
  deposit: any[];
  max_recharge: number;
}

export interface HealthPackage {
  _id: string;
  name: string;
  mrp: number;
  user: number;
  available: boolean;
  cashback: number;
}

export interface Testgroup {
  _id: string;
  name: string;
  user: number;
  mrp: number;
  cashback: number;
  available: boolean;
}

export interface Time {
  to: string;
  from: string;
}

export interface Days {
  sat: boolean;
  fri: boolean;
  thu: boolean;
  wed: boolean;
  tue: boolean;
  mon: boolean;
  sun: boolean;
}

export interface Timing {
  time: Time;
  days: Days;
}

export interface Facilities {
  online_report: boolean;
  nabl: boolean;
  parking: boolean;
  ac: boolean;
  insurance: boolean;
  credit_card: boolean;
  home_collection: boolean;
}

export interface Admin {
  password: string;
  username: string;
}

export interface Geolocation {
  latitude: number;
  longitude: number;
}

export interface ReportHeader {
  line4: string;
  line3: string;
  line2: string;
  line1: string;
}

export interface Cover {
  mobile: string;
  image: string;
}

export interface LabsRatelistInterface {
  _id: string;
  __v: number;
  address: string;
  created_on: Date;
  email: string;
  name: string;
  phone: string;
  rating: number;
  healthpackages: Healthpackages;
  home_collection_price: number;
  pre_paid: PrePaid;
  reviews: any[];
  health_packages: HealthPackage[];
  testgroups: Testgroup[];
  timing: Timing;
  home_collection: boolean;
  lab_visit: boolean;
  home_collection_only: boolean;
  facilities: Facilities;
  employees: any[];
  admin: Admin;
  contacts: any[];
  city: string;
  geolocation: Geolocation;
  report_header: ReportHeader;
  cover: Cover;
  camp: boolean;
  franchisee: boolean;
  publish: boolean;
}

现在我做一个变量labsRateInterface:LabsRatelistInterface;

onChange(event) {
  console.log(event.value);
  this.labsRatelistService.getlabs(event.value).subscribe(
    ShowData => {
      this.labsRateInterface = ShowData;
      console.log(this.labsRateInterface);
      for (let i = 0; i < this.labsRateInterface.testgroups.length; i++) {
        console.log(this.labsRateInterface.testgroups[i].name)
      }
    }, error => {
      this.statusMessage = error;
    });
}

最后下面是我的HTML，我想打印测试组的列表

<tbody>
  <tr *ngFor="let test of labsRateInterface.testgroups; let i=index">
    <td>{{i+1}}</td>
    <td>{{test._id}}</td>
    <td>{{test.name}}</td>
  </tr>
</tbody>

但它显示错误“testgroup的未定义的属性”，而不是打印任何东西。

Answer 1

使用安全的导航操作?，

<tbody>
  <tr *ngFor="let test of labsRateInterface?.testgroups; let i=index">
    <td>{{i+1}}</td>
    <td>{{test._id}}</td>
    <td>{{test.name}}</td>
  </tr>
</tbody>

Answer 2

使用异步管道。

由于结果完全基于可观察到的是异步的。因此，它能够更好地使用异步管道。

<tbody>
  <tr *ngFor="let test of labsRateInterface.testgroups | async; let i=index">
    <td>{{i+1}}</td>
    <td>{{test._id}}</td>
    <td>{{test.name}}</td>
  </tr>
</tbody>