0

child-component 内の ngModel-values による奇妙な動作があります。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 出力には表示されませんが、次のように表示されます: this.kName このようにしようとすると:

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

initkName が定義されていないため、html-pattern でエラーが発生します。ngModel 値を更新するにはどうすればよいですか? 多分私は他の問題を抱えています...

4

1 に答える 1

1

どこかに別の問題があるようです..

コンソールにエラー メッセージはありますか?

このプランカーを見て、期待どおりに動作します: 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 {}
于 2016-11-02T09:41:42.387 に答える