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）です。 「this.kName」は、親コンポーネントから毎回新しい値を取得することがわかります。私が上で、この分野でいくつかのアクションの後に設定したときに しかし：

this.kName = undefined; 

そして私は親から再びkNameを埋めるためにしたい、私のkName電流値は、HTML出力には表示されませんが、私は上で見ることができます： this.kName 私はこのように行うしようとすると：kNameが定義されていないので

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

私は、htmlのパターンによってinit上のエラーを取得します。 ngModelの値を更新するにはどうすればよいですか？私はあなたがどこか別の問題を抱えているよう

Answer 1

はそう...他のいくつかの問題を抱えている はたぶん..

はあなたのいずれかのエラーメッセージがコンソールありますか？

は、このplunkerを見て期待通りに動作します：https://plnkr.co/edit/2VUOimDCMvPSNHD1mX69?p=preview

あなたは「クリア」することができ、それは、と...親コンポーネントから

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