是否可以实时更新ngModel？

Question

我有一个带有ngModel的简单输入，问题是我无法实时看到ngModel包含的内容，并且出现了一个错误，提示Cannot read property 'content' of undefined

<input ([ngModel])="page.content" />

{{ page.content }}

export interface Page {
  uid: string;
  content: string;
}

@Input() page: Page;

ngOnInit() {
  console.log(this.page.content)
}

因此，这就是我所尝试的，而我要做的就是获取console.log我在<input ([ngModel])="page.content" />中键入内容时实时输入的内容

这里是stackblitz供参考

Answer 1

之所以发生这种情况，是因为在Angular生命周期中，首次创建页面时，page的值为null。

您可以在.html中执行的操作：

[(ngModel)]="page?.content"。

这将在尝试访问内容之前检查页面是否存在。 希望这会有所帮助！

Answer 2

请在您的html中进行以下更改：

[(ngModel)]="page.content"

代替

([ngModel])="page.content"

并在ts中初始化对象：

this.page = {uid: '000001', content: 'zero'};

请找到修改后的演示： modified stackblitz

希望这会有所帮助。

Answer 3

您必须初始化页面对象。 试试这个：

ngOnInit() {
    this.page = { uid: '1234', content: 'hello' }
}

或

ngOnInit() {
    this.page = { uid: '', content: '' }
}

致谢