Angular 6 ngModel不会更改appcomponent中的值

Question

我现在正在练习角度和打字稿，面临一些简单的问题。

这是我的component.html

<div>
    <input [(ngModel)]="mynumber">
    N is now {{N}}
    // some content I want to do with functions with changing mynumber
</div>

还有我的component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {
    mynumber = '1';
    N = this.mynumber;
    // some function with mynumber
}

问题是，“ N现在是＃”应该实时更改我键入的内容。 但是更改似乎从未传递给AppComponent。 N最初保留为1。 当我键入内容时，如何更改mynumber值，并且更改也会影响函数？

Answer 1

行执行期间

N = this.mynumber;

N被分配了this.mynumber的当前值，即1。更改mynumber时，其值不会自动更新。 您可以a）放弃冗余属性N并仅使用mynumber ，或者b）每次更新mynumber都对其进行更新N

Answer 2

将N的值初始化为mynumber它只会发生一次，并且不会反映对mynumber值的新更改。

要使其工作，您可以对ngModelChange进行事件绑定，并破坏[[x）]语法，并在组件中触发一个方法，该方法将在mynumber更改时更新N的值：

<input [ngModel]="mynumber" (ngModelChange)="valuechange($event)">
  N is now {{N}}

并在组件中，在触发方法时更新N ：

 valuechange(value){
    this.N = value;
 }

尽管这种方法是多余的，并且您可以简单地在模板表达式中使用mynumber 。