Question

我有下表，但是我应该检查变量是否为null，这样我就不会打印该表了，但是我尝试下面的操作，但收到错误消息“无法读取null的'shoulders'属性

<div ng-if="shoulders!=null">
<ion-label color="danger" ><b>Shoulders</b></ion-label>
<ion-grid>
    <ion-row text-wrap>
        <ion-col width-25 >Exercises</ion-col>
        <ion-col width-25 >Machine ID</ion-col>
        <ion-col width-25 >Days</ion-col>
        <ion-col  width-25>Hints</ion-col>
      </ion-row> 
    <ion-row text-wrap *ngFor="let exercise of shoulders.shoulders |keys">
        <ng-container  *ngFor="let machine of MachinesDetails "> 
            <ng-container  *ngIf="machine.machine_no == exercise.key">
      <ion-col > {{machine.name}}</ion-col>
      <ion-col > {{machine.machine_no}}</ion-col>
    </ng-container >
    </ng-container >
      <ion-col > {{exercise.value}}</ion-col>
      <ng-container  *ngFor="let hints of shoulders.hints[exercise.key] |keys ">        
          <ion-col > {{hints.value}} </ion-col>
    </ng-container >
    </ion-row>
  </ion-grid></div>

我也尝试这个

<div ng-if="shoulders">
<ion-label color="danger" ><b>Shoulders</b></ion-label>
<ion-grid>
    <ion-row text-wrap>
        <ion-col width-25 >Exercises</ion-col>
        <ion-col width-25 >Machine ID</ion-col>
        <ion-col width-25 >Days</ion-col>
        <ion-col  width-25>Hints</ion-col>
      </ion-row> 
    <ion-row text-wrap *ngFor="let exercise of shoulders.shoulders |keys">
        <ng-container  *ngFor="let machine of MachinesDetails "> 
            <ng-container  *ngIf="machine.machine_no == exercise.key">
      <ion-col > {{machine.name}}</ion-col>
      <ion-col > {{machine.machine_no}}</ion-col>
    </ng-container >
    </ng-container >
      <ion-col > {{exercise.value}}</ion-col>
      <ng-container  *ngFor="let hints of shoulders.hints[exercise.key] |keys ">        
          <ion-col > {{hints.value}} </ion-col>
    </ng-container >
    </ion-row>
  </ion-grid></div>

从我的api获取视图中数据的组件，但出现上述错误，也许我从api获取数据，也许数据为空，当我安慰值肩膀而我却得到空的时候

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { PipeTransform, Pipe } from '@angular/core';
import {KeysPipe} from '../../pipes/keys/keys';
import { RestProvider } from '../../providers/rest/rest';

/**
 * Generated class for the ViewworkoutPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more         
 info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-viewworkout',
  templateUrl: 'viewworkout.html',
})
export class ViewworkoutPage {
  workout:any;
  workoutDetails:any;
  chest:any;
  back:any;
    shoulders:any = {
      shoulders: '',
      hints: ''
     };
  bitriceps:any;
  legs:any;
  absback:any;
  free:any;
  notes:any;

  MachinesDetails:any;

  Machines() {

    this.restProvider.getMachines()
    .then(data => {
      this.MachinesDetails = data;
      console.log(this.MachinesDetails);
    });
  }


  constructor(public navCtrl: NavController, public navParams:     
  NavParams,public restProvider: RestProvider) {
    this.workout = navParams.get('data');
    this.workoutDetails = this.workout.workout;
    this.chest = this.workout.chest;
    this.back = this.workout.back;
    this.shoulders = this.workout.shoulders;   
    console.log(this.shoulders);

    this.bitriceps = this.workout.bitriceps;
    this.legs = this.workout.legs;
    this.absback = this.workout.absback;
    this.free = this.workout.free_exercises;
    this.notes = this.workout.notes;

    this.Machines();



  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ViewworkoutPage');
  }

}

任何帮助表示赞赏

Answer 1

如果不确定是否满足条件，则应使用可选条件（'？。'）。

组件：

export class ViewworkoutPage {
  shoulders:any = {
     shoulders: '',
     hints: ''
  };

模板：

<div ng-if="shoulders && shoulders?.shoulders">
<ion-label color="danger" ><b>Shoulders</b></ion-label>
<ion-grid>
    <ion-row text-wrap>
        <ion-col width-25 >Exercises</ion-col>
        <ion-col width-25 >Machine ID</ion-col>
        <ion-col width-25 >Days</ion-col>
        <ion-col  width-25>Hints</ion-col>
      </ion-row> 
    <ion-row text-wrap *ngFor="let exercise of shoulders.shoulders |keys">
        <ng-container  *ngFor="let machine of MachinesDetails "> 
            <ng-container  *ngIf="machine.machine_no == exercise.key">
      <ion-col > {{machine.name}}</ion-col>
      <ion-col > {{machine.machine_no}}</ion-col>
    </ng-container >
    </ng-container >
      <ion-col > {{exercise.value}}</ion-col>
      <ng-container  *ngFor="let hints of shoulders.hints[exercise.key] |keys ">        
          <ion-col > {{hints.value}} </ion-col>
    </ng-container >
    </ion-row>
  </ion-grid></div>

Answer 2

最后，我用以下解决方案解决了这个问题，同样是在ngif中，我错过了*

<div *ngIf="shoulders">
    <ion-label color="danger" ><b>Shoulders</b></ion-label>
    <ion-grid>
        <ion-row text-wrap>
            <ion-col width-25 >Exercises</ion-col>
            <ion-col width-25 >Machine ID</ion-col>
            <ion-col width-25 >Days</ion-col>
            <ion-col  width-25>Hints</ion-col>
          </ion-row> 
        <ion-row text-wrap *ngFor="let exercise of shoulders.shoulders |keys">
            <ng-container  *ngFor="let machine of MachinesDetails "> 
                <ng-container  *ngIf="machine.machine_no == exercise.key">
          <ion-col > {{machine.name}}</ion-col>
          <ion-col > {{machine.machine_no}}</ion-col>
        </ng-container >
        </ng-container >
          <ion-col > {{exercise.value}}</ion-col>
          <ng-container  *ngFor="let hints of shoulders.hints[exercise.key] |keys ">        
              <ion-col > {{hints.value}} </ion-col>
        </ng-container >
        </ion-row>
      </ion-grid>
</div>

ngif无法读取null的属性“ shoulders”

2 个答案: