我正在尝试将离子选择值插入数组。
无法读取未定义的属性“ 0”。我想它来自文件order-menu.html，在代码orderArray[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中打印时，我可以看到数组内的值已经分配。但是我仍然收到相同的错误无法读取未定义的属性“数量”
任何帮助将不胜感激。
答案 0 :(得分：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
});
答案 1 :(得分：0)
要在使用orderArray之前对其进行初始化，请在ngOnInit方法中将您的元素推入数组，如下所示：
<record model="ir.actions.act_window.view" id="act_x_dummy_tree_view">
<field eval="1" name="sequence"/>
<field name="view_mode">tree</field>
<field name="view_id" ref="dummy_tree_view"/>
<field name="act_window_id" ref="dummy_action"/>
</record>
<record model="ir.actions.act_window.view" id="act_x_dummy_form_view">
<field eval="10" name="sequence"/>
<field name="view_mode">form</field>
<field name="view_id" ref="dummy_form_view2"/>
<field name="act_window_id" ref="dummy_action"/>
</record>