Не могу перебрать мой элемент интерфейса с * ngFor в html-файле Angular 2 - PullRequest
Новая
       6

Не могу перебрать мой элемент интерфейса с * ngFor в html-файле Angular 2

0 голосов
/ 11 февраля 2019

Я получаю данные из 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>

Но он показывает ошибку "свойство группы тестов undefined "и ничего не печатать.

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Использовать асинхронный канал.

Поскольку результат полностью основан на наблюдаемой, которая является асинхронной.Так что лучше использовать асинхронную трубу. 

<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>
0 голосов
/ 11 февраля 2019

Используйте оператор безопасной навигации ?, 

<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>
...