电子中的双向数据绑定角度2 [英] Two Way Data Binding Angular 2 in Electron not working

问题描述

我用电子伪造创建了一个新的电子项目，该项目使用了角2。

I used electron-forge to create a new electron project that uses angular 2


npm install -g电子伪造
电子锻造init -t angular2


然后我添加了 @ angular / forms


纱线添加@ angular / forms


然后我将app.components.ts文件编辑如下：

Then I edited the app.components.ts file to look like this

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 { }

双向绑定不起作用...当我更改输入控件中的文本时，文件名没有改变

Two way binding is not working...when I change the text in my input control, the name filed is not changing

我丢失了什么？

推荐答案

我发现了问题所在。

我必须加载zone.js并在其中反射元数据index.html而不是bootstrap.ts。所以当我这样做

I had to load zone.js and reflect-metadata in index.html instead of bootstrap.ts. So when I did this

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

这很有用。我必须删除此

This worked. I had to remove this

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

来自bootstrap.ts

From bootstrap.ts

这篇关于电子中的双向数据绑定角度2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！