Question

当所有值都正确时，我的代码运行，但是当我遇到未定义的错误时，*ngFor会永远运行此未定义的错误。

是什么原因造成的？以及如何防止这种无限循环（确保数据存在）

例如：

Can't read property name of undefined

这是什么原因造成的？

标记：

<ion-content>
  <ion-icon ion-fixed class="close" (click)="back()" name="close"></ion-icon>
  <div class="data" *ngFor="let venue of data">
    <img [src]="venue.imagePath" alt="">
    <div class="box-preview" padding>
      <h1>{{venue.name | async}}</h1>
      <p class="intro-text">{{venue.desciption}}</p>
      <div class="next-gig">
        <h4>Nächste Events</h4>
        <div class="venue-box" *ngFor="let event of venue['eventSchedules']" [ngStyle]="{'background-image': 'url('+ event.event.imagePath +')'}">
          <div class="box">
            <h1>{{event.event.name}} </h1>
            <p> {{venue.name}}</p>
          </div>
        </div>
        <div class="venue-box" [ngStyle]="{'background-image': 'url(assets/imgs/2.png)'}">
          <div class="box">
            <h1>Andy Schulthess </h1>
            <p>Funk</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>

提供者：

  getLocation(location) {
    return new Promise(resolve => {
      this.http.get(this.apiUrl+'/Locations/' + location).subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });

控制器：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { SomtProvider } from '../../providers/somt/somt';
import * as moment from 'moment';

@IonicPage()
@Component({
  selector: 'page-venue-preview',
  templateUrl: 'venue-preview.html',
})
export class VenuePreviewPage {

  id: String = this.navParams.get("id");
  data: any;

  constructor(public somt:SomtProvider, public modalCtrl: ModalController, public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad VenuePreviewPage');
    this.getLocationDetail();
  }
  back() {
    this.navCtrl.pop();
  }
  cut3(str) {
    str = str.substring(0, str.length - 3);
    return str;
  }

  getLocationDetail() {
    this.somt.getLocation(this.id)
      .then(data => {
        this.data = [data];
        console.log(this.data);

      });
  }
  toDateSpan(start, end, startdate) {
    let startdat = moment(startdate).locale("de-CH").format("ddd, D, MMM");
    return startdat + ", " + this.cut3(start) + " - " + this.cut3(end)
  }

}

Answer 1

因此，当您拥有ngFor指令的数据源（在模板生成时可能尚不可用）时，您可能希望指示使用？正如Trichetriche指出的那样：

<ion-content>
  <ion-icon ion-fixed class="close" (click)="back()" name="close"></ion-icon>
  <div class="data" *ngFor="let venue of data">
    <img [src]="venue.imagePath" alt="">
    <div class="box-preview" padding>
      <h1>{{venue.name | async}}</h1>
      <p class="intro-text">{{venue.desciption}}</p>
      <div class="next-gig">
        <h4>Nächste Events</h4>
        <div class="venue-box" *ngFor="let event of venue['eventSchedules']" [ngStyle]="{'background-image': 'url('+ event.event.imagePath +')'}">
          <div class="box">
            <h1>{{event.event?.name}} </h1>
            <p> {{event.venue?.name}}</p>
          </div>
        </div>
        <div class="venue-box" [ngStyle]="{'background-image': 'url(assets/imgs/2.png)'}">
          <div class="box">
            <h1>Andy Schulthess </h1>
            <p>Funk</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>

您可以检查Angular's documentation中的“安全导航操作员”

Answer 2

写这个简单的条件以避免错误

 <h1 *ngIf="event && event.event">{{event.event.name}} </h1>
 <p *ngIf="venue"> {{venue.name}}</p>

* ngFor在属性不存在时导致无限循环

2 个答案: