angular - 无法读取未定义的属性“数量”

Question

目标

我正在尝试将离子选择值插入数组。

问题

无法读取未定义的属性“0”。我想它来自代码下的文件 order-menu.htmlorderArray[i].quantity

我的代码

我有一个模型文件order-array.ts

export interface OrderArray {
  $key?: string,
  menuName: string,
  menuPrice: string,
  quantity: string
}

和order.ts

export interface Order {
  custName: string,
  custPhone: string,
  restoName: string,
  restoPhone: string,
  restoAddress: string,
  message: string,
  orderArray: string
}

这是我的order-menu.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase, AngularFireList, AngularFireAction, DatabaseSnapshot } from '@angular/fire/database';

import { ProfileCust } from './../../models/profile-cust';
import { ProfileResto } from './../../models/profile-resto';
import { Menu } from './../../models/menu';
import { Order } from './../../models/order';
import { OrderArray } from './../../models/order-array';

import { OrderCustPage } from '../order-cust/order-cust';

@IonicPage()
@Component({
  selector: 'page-order-menu',
  templateUrl: 'order-menu.html',
})
export class OrderMenuPage {

  today: number = Date.now(); //get current time

  menuRef: AngularFireList<Menu>;
  menuData: Observable<AngularFireAction<DatabaseSnapshot<Menu>>[]>;

  //retrieve customer & resto profile
  profileCust: Observable<ProfileCust>;
  profileResto: Observable<ProfileResto>;

  restoData: {key: string}; //this parameter is passed from HomePage

  menu = {} as Menu;
  order = {} as Order;

  public orderArray : OrderArray[] = [];

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
    private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams) {
      this.restoData = navParams.get('restoDataPass');
  }

ngOnInit(){
    let dataArray = {
      menuName: 'Name',
      menuPrice: '15000',
      quantity: 1
    }
    this.orderArray.push(dataArray);
    console.log(dataArray);
  }

  ionViewDidLoad() {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.menuRef = this.afDatabase.list<Menu>(`menu/${this.restoData.key}`);
        this.menuData = this.menuRef.snapshotChanges();

        console.log(this.orderArray);
        // assign the values from profile customer model to order-customer model
        this.profileCust = <Observable<ProfileCust>>this.afDatabase.object(`profile-cust/${data.uid}`).valueChanges();
        this.profileCust.subscribe(res => {
            this.order.custName = res.custName;
            this.order.custPhone = res.custPhone
          //   var d = new Date();
          //  this.order.timestamp = d.getTime()
          }
        );

        // assign the values from profile resto model to order-resto model
        this.profileResto = <Observable<ProfileResto>>this.afDatabase.object(`profile-resto/${this.restoData.key}`).valueChanges();
        this.profileResto.subscribe(res => {
            this.order.restoName = res.restoName;
            this.order.restoPhone = res.restoPhone;
            this.order.restoAddress = res.restoAddress
          }
        );

      }
      else {
      }
    });
  }

  orderMenu(){
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        // write this order to DB node order-resto
        this.order.orderArray = this.orderArray.toString();
        console.log(this.orderArray);
        this.afDatabase.list(`order-resto/${this.restoData.key}`).push(this.order);

        // write this order to DB node order-cust
        this.afDatabase.list(`order-cust/${data.uid}`).push(this.order);

        this.navCtrl.setRoot(OrderCustPage);
        console.log(this.orderArray);

        this.toast.create({
          message: `Menu sudah dipesan`,
          duration: 3000
        }).present();
      }
      else {
        this.toast.create({
          message: `Mohon mendaftar terlebih dahulu di Menu - Masuk`,
          duration: 3000
        }).present();
      }
    });
  }
}

和order-menu.html

<ion-header>

  <ion-navbar color="primary">
    <ion-title>OrderMenu</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let data of menuData | async ; let i = index ">
      <div item-content>
        <h2>Menu Name: {{data.payload.val().menuName}}</h2>
        <p>Price: {{data.payload.val().menuPrice}}</p>
        <ion-item>
          <ion-label>
            Quantity:
          </ion-label>
          <ion-select [(ngModel)]="orderArray[i].quantity">
            <ion-option value="1">1</ion-option>
            <ion-option value="2">2</ion-option>
          </ion-select>
        </ion-item>
      </div>
    </ion-item>
  </ion-list>

  <ion-item item-content>
    <ion-label floating>Catatan</ion-label>
    <ion-input type="text" [(ngModel)]="order.message"></ion-input>
  </ion-item>
  <button ion-button (click)="orderMenu()">Order</button>

</ion-content>

-- 2018 年 10 月 25 日更新

我已经添加ngOnInit(){...}（参见上面的代码）。当我在 console.log 中打印时，我可以看到数组中的值已经被赋值。但是我仍然收到相同的错误无法读取未定义的属性“数量”

任何帮助，将不胜感激。

标签： angularionic-framework

Answer 1

错误很简单，您正在尝试设置未定义的 ngModel 值。由于您的数组是空的并且它没有任何元素，因此您要在其中设置索引。要么定义你的数组，要么使用不同的变量来设置选定的值。

线后

if(data && data.email && data.uid){
    this.menuRef = this.afDatabase.list<Menu>(`menu/${this.restoData.key}`);
    this.menuData = this.menuRef.snapshotChanges();

添加此以将初始值分配给orderArray[i].quantity：

this.menuData.subscribe(result => {
          for (let i=0; i<result.length; i++){
            let dataArray = {
              menuName: result[i].payload.val().menuName,
              menuPrice: result[i].payload.val().menuPrice,
              quantity: 0
            }
            this.orderArray.push(dataArray);
            console.log(dataArray); //to logthe dataArray
          }
          console.log(result); //to log the result
          console.log(this.orderArray); //to log the orderArray
        });