Electron 中的雙向數據綁定 Angular 2 不起作用

Question

我使用electron-forge創建了一個使用angular 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 { }

雙向綁定不起作用...當我更改輸入控件中的文本時，提交的名稱沒有更改

我錯過了什么？

Answer 1

我解決了這個問題。

我不得不在 index.html 而不是 bootstrap.ts 中加載 zone.js 和反射元數據。 所以當我這樣做的時候

  <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

Answer 2

因為這可能是因為你忘記在module.ts文件中添加FormsModule。檢查你的app.module.ts

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

相關問題