Angular2 ngModel-var 值与 this.var 值不同

Question

我的 ngModel 值在子组件中有一些奇怪的行为。 html-代码：

<input type="text" pattern="^[a-zA-Z]$"
                           class="form-control" required="true"
                           id="myId" 
                           [(ngModel)]="kName">

kName 是一个输入字段（@kName:string），它将由父组件填充。我可以看到 "this.kName" 每次都从父组件获取新值。但是当我在这个字段上进行一些操作后设置：

this.kName = undefined;

然后我想从父级再次填充 kName，我的 kName-current 值不会出现在 html-output 上，但我可以看到：this.kName 当我尝试这样做时：

<input type="text" pattern="^[a-zA-Z]$"
                           class="form-control" required="true"
                           id="myId" 
                           [(ngModel)]="{{this.kName}}">

我在 init 上遇到 html 模式的错误，因为 kName 未定义。如何刷新我的 ngModel 值？也许我还有一些其他问题...

Answer 1

看来你还有其他问题..

您的控制台中是否有任何错误消息？

看看这个 plunker，按预期工作：https://plnkr.co/edit/2VUOimDCMvPSNHD1mX69?p=preview

你可以"clear"它并从父组件重写它..

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

@Component({
  selector: 'my-child',
  template: `
    <input [(ngModel)]="kName" />
    <button (click)="clearFunction()">clear</button>
    <br />
    {{kName}}
  `,
})
export class Child {
  @Input() kName: string;

  constructor() { }

  clearFunction() {
    this.kName = undefined;
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="changeSomething()">Hello {{name}}</h2>
      <my-child [kName]="myKname"></my-child>
    </div>
  `,
})
export class App {
  name:string;
  myKname: string;

  constructor() {
    this.name = 'Angular2'
  }

  changeSomething() {
    this.myKname = Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  }
}

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

Angular2 ngModel-var 值与 this.var 值不同

Angular2 ngModel-var value does not same like this.var value

input

ngmodel

angular