关闭模式结果错误“TypeError:无法读取属性'取消'未定义”

时间:2016-08-09 13:56:26

标签: javascript angular typescript ionic-framework ionic2

经过几个小时的撞击我的桌子后,我准备接受教育了。我是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语句,如果你愿意,我可以添加它们。

如何将“主页”表单中的参数传递给模态,这样我就可以回去了?

谢谢!

0 个答案:

没有答案