双向数据绑定角度2在电子不工作

时间:2017-01-28 06:21:36

标签: angular electron electron-forge

我使用电子伪造来创建一个使用角度2

的新电子项目

npm install -g electron-forge electron-forge init -t angular2

然后我添加了@angular/forms

yarn add @angular/forms

然后我编辑了app.components.ts文件,看起来像这样

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'App',
  template:
  `<div>
    <h2>Welcome to {{name}} Angular2!</h2>
    {{name}}
    <input [(ngModel)] = "name">
  </div>`
})
export class AppComponent implements OnInit {
  public name = 'electron-forge';

  ngOnInit(): void {
    console.log('component initialized');
  }
}

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

双向绑定不起作用...当我更改输入控件中的文本时,名称字段不会更改

我错过了什么?

2 个答案:

答案 0 :(得分:1)

我发现了问题。

我不得不在index.html而不是bootstrap.ts中加载zone.js和reflect-metadata。所以当我这样做时

  <script src="../node_modules/zone.js/dist/zone.js"></script>
  <script src="../node_modules/reflect-metadata/Reflect.js"></script>
  <script src="bootstrap.ts"></script>

这很有用。我不得不删除这个

import 'zone.js';
import 'reflect-metadata';

来自bootstrap.ts

答案 1 :(得分:0)

这可能是因为您忘记在module.ts文件中添加FormsModule。请检查您的app.module.ts

import { FormsModule } from '@angular/forms';
...
imports: [ ..., FormsModule, ...]

Related question