经过几个小时的撞击我的桌子后,我准备接受教育了。我是Ionic2 / Angular2的新手,所以请原谅我,如果我的代码没有完美重构。
我有一个有项目的表格。此项是我的表单中的许多项之一,它将对应于存储在JSON对象中的数据。我有成功加载模式的JSON数据的表单,但是当我添加模态时,它会中断。
<ion-item *ngSwitchCase="'group'" >
<button item-right (click)="gotoAddKidsModal()"><ion-icon name="add"></ion-icon></button>
<ion-label primary>{{q.variableName}}</ion-label>
</ion-item>
这成功地将模态带入视图
@Component({
templateUrl: 'build/pages/add-kids/add-kids.html'
})
export class AddKidsModal {
static get parameters(){
return [[NavController],[ViewController],[NavParams]];
};
constructor(private nav: NavController,
private navParams: NavParams,
private formBuilder: FormBuilder,
public viewCtrl: ViewController,
public modal: Modal) {
this.viewCtrl = viewCtrl
};
close(){
this.viewCtrl.dismiss();
};
}
当我按下后退按钮时
<ion-header>
<ion-navbar>
<ion-title>Add Kids</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-header-bar>This is the add kids page</ion-header-bar>
<ion-item>
<ion-label primary>This is a label</ion-label>
<ion-input type="text" > </ion-input>
</ion-item>
<ion-item>
<ion-label primary>This is a label</ion-label>
<ion-input type="text"> </ion-input>
</ion-item>
<button light (click)="close()">
<ion-icon name='arrow-back'></ion-icon>
Back
</button>
</ion-list>
我收到错误"TypeError: Cannot read property 'dismiss' of undefined"
。
现在我认为问题在于我没有
static get parameters() {
return [[NavController]];
}
在我的“主页”中,或者换句话说,就是模态出来的页面。当我添加它时,应用程序会中断。
@Component({
templateUrl: 'build/pages/leads/leads.html',
providers: [JsonData, AddKidsModal],
directives: [CORE_DIRECTIVES]
})
export class LeadsPage {
//This breaks the app!
static get parameters() {
return [[NavController]];
}
leadsForm: ControlGroup;
//Any Idea ho to get this to be more concise?
"1": AbstractControl;
"2": AbstractControl;
"3": AbstractControl;
"4": AbstractControl;
"5": AbstractControl;
"6": AbstractControl;
"7": AbstractControl;
"8": AbstractControl;
submitAttempt: Boolean = false;
public questions: AbstractControl;
constructor(private navCtrl: NavController,
private navParams: NavParams,
private formBuilder: FormBuilder,
private http: Http,
public jsondata: JsonData,
public addKidsModal: AddKidsModal
) {
this.leadsForm = formBuilder.group({
"1": [""],
"2": [""],
"3": [""],
"4": [""],
"5": [""],
"6": [""],
"7": [""],
"8": [""]
});
this.loadQuestions();
this.navCtrl = navCtrl;
}
loadQuestions(){
this.jsondata.load()
.then(data => {
this.questions = (data);
})
};
submit(){
this.submitAttempt = true;
console.log("Success!");
var data = this.leadsForm.value;
this.jsonMaker(data);
};
jsonMaker(data){
console.log(JSON.stringify(data)), error => {
console.log("oooops!");
}
};
gotoAddKidsModal() {
let modal = Modal.create(AddKidsModal);
this.navCtrl.present(modal);
};
添加时会出现此错误。
TypeError: Cannot read property 'group' of undefined
该组引用FormBuilder.group方法。但是我如何规避这一点,因为那就是生成我的FormControls的东西?
为简单起见,我没有包含任何import语句,如果你愿意,我可以添加它们。
如何将“主页”表单中的参数传递给模态,这样我就可以回去了?
谢谢!