时间戳

首页 > 解决方案 > ngif 无法读取 null 的属性“肩膀”

ionic-framework - ngif 无法读取 null 的属性“肩膀”

问题描述

我有下表，但我应该检查变量是否为空，因此我不会打印该表，但我尝试以下并收到错误无法读取 null 的属性“肩膀”

<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');
  }

}

任何帮助表示赞赏

标签： ionic-frameworkionic3

解决方案

如果您不确定是否满足条件，则应使用可选条件 ('?.')。

零件：

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>

推荐阅读