为什么在构造函数中初始化的成员变量会在离子角的ngInit中未定义?

我有一个由窗体组成的模态,它被绑定到 “Foo “的实例上。在构造模态的过程中,foo被正确设置。我在使用断点和 console.log. 但是,在构造函数之后的任何时候。this.fooundefined.

EDIT:我已经找到了解决办法,但我的问题仍然存在。我的解决方法是将我的任务中的 foongOnInit() 而不是构造函数。

模板。

<ion-header>
    <ion-toolbar>
      <ion-title>New Foo</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item>
        <ion-input placeholder="Name" [(ngModel)]="foo.name"></ion-input>
      </ion-item>
      <!-- etc... -->
    </ion-list>

    <ion-button expand="block" color="primary" (click)="create()">
      Create
    </ion-button>
</ion-content>

组件。

export class FooModalComponent implements OnInit {

  foo: Foo = new Foo();

  constructor(
    private modalController: ModalController,
    private navParams: NavParams
  ) { 
    const inputFoo = this.navParams.get("foo");

    if (inputFoo) {
      // this shouldn't matter, as foo would have to be truthy (not undefined)
      this.foo = inputFoo;
    }

    // logs this.foo as expected
    console.log(this.foo);
  }

  ngOnInit() {
    // logs: undefined
    console.log(this.foo);
  }

  close() {
    this.modalController.dismiss();
  }

  create() {
    this.modalController.dismiss(this.foo);
  }
}

模型:

export class Foo {
    name: string;
}

解决方案:

在较新的Ionic版本(可能是4+)中,传递给模态的数据为 componentPropsNavParams 会自动分配给要展示的组件中的相应类变量。如果你传递了一个未定义的变量,相应的字段将被有效地删除。这发生在对象构造之后,但在 ngOnInit 是被调用的,这就是为什么你的变通方法做到了。

Ionic 5 文档 提及 @Input 注释,但在没有注释的情况下,似乎也会发生同样的情况,尽管我找不到任何关于这个说法的确认。

你可能做了什么。

this.modalController.create({
  component: FooModalComponent,
  componentProps: { foo: foo } // foo might be undefined
})

为了避免传递一个未定义的foo,你可以做一些类似的事情。

this.modalController.create({
  component: FooModalComponent,
  componentProps: foo ? { foo } : {}
})

或者,像你一样,重新分配变量到 ngOnInit 根据需要。另外,你可能不需要 NavParams 在构造函数中不再使用,因为此时传递的参数已经被分配了。

给TA打赏
共{{data.count}}人
人已打赏
解决方案

为什么我只能在for循环中改变一个列表,当我使用括号时?

2022-4-22 11:09:03

解决方案

如何在django中把geojson文件转换为类模型?

2022-4-22 12:08:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索