ngModel 用白屏杀死输出

Question

我是 Angular 2 的新手，正在尝试学习使用它的 Pluralsight 课程。它让我通过 [(ngModel)]="book.title" 进行双向绑定，但是当我在我的书中输入以下内容时 - form.component.html:

  <div class="form-group row">
    <label class="col-2 col-form-label">Title</label>
    <div class="col-10">
      <input class="form-control" type="text" name="title" [(ngModel)]="book.title">
    </div>
  </div>

当我尝试浏览应用程序时，我只看到白屏。该变量在 book-form.component.ts 文件中正确声明，我可以毫无问题地执行此操作：

  <div class="form-group row">
    <label class="col-2 col-form-label">Title</label>
    <div class="col-10">
      <input class="form-control" type="text" name="title" value="{{book.title}}">
    </div>
  </div>

因此，我不确定在第一个似乎与视频匹配的双向绑定示例中做错了什么，但在单向变量输出的第二个示例中我没有做错。

它没有给我任何错误；当我尝试在浏览器中点击该应用程序时，只显示白屏。 'ng serve' 输出显示编译成功。

Answer 1

您需要在模块中导入 FormsModule

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
   //...
    FormsModule
  ]
})

ngModel 用白屏杀死输出

ngModel kills output with white screen

typescript

angular2-ngmodel

angular