无法在 Angular 的 html 文件中使用 *ngFor 遍历我的界面元素 2

Question

我正在通过我的界面从 API 获取数据，但无法借助 Html 文件中的 *ngFor 指令显示这些数据。

下面是我的名为 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 property of undefined" 并且没有打印任何东西。

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>

无法在 Angular 的 html 文件中使用 *ngFor 遍历我的界面元素 2

Can't loop through my interface element with *ngFor in html file of Angular 2

angular

html

interface

model-binding

angular2-directives