Question

我是Angular 2的新手，并尝试遵循使用它的Pluralsight课程。它使我通过[（ngModel）] =“ book.title”进行两种方式的绑定，但是当我在book-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杀死白屏输出

1 个答案: