typescript - Angular2 formulärfält växlar inte på @input-variabel

I Angular2 har jag ett mycket enkelt formulär:

Form.ts

import {Component, Input} from 'angular2/core'

@Component({
  selector: 'my-form',
  providers: [],
  template: `
    <form>

      {{ details }}

      <input type="text" placeholder="name" />
      <input *ngIf="details" type="text" placeholder="details" />
    </form>
  `,
  directives: []
})
export class MyForm {

  @Input() details: bool;

  constructor() {

  }
}

Som visas i denna Plunkr, när jag växlar details @input via knappen, ändras texten mellan true och false.

Men *ngIf växlar inte textfältet alls.

Några tankar om vad jag missar här?

App.ts

import {Component} from 'angular2/core'
import {MyForm} from './form'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <button (click)="toggle()">toggle details</button>
      <my-form details="{{visible}}"></my-form>
    </div>
  `,
  directives: [MyForm]
})
export class App {

  visible: boolean = false;

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

  toggle() {
    this.visible = !this.visible;
  }
}

Svar #1

Du bör använda följande istället:

<my-form [details]="visible"></my-form>

istället för

<my-form details="{{visible}}"></my-form>

Detta gör det möjligt att använda egenskapsbindning, dvs. enkelriktad bindning (via referens). Detta innebär att när det angivna uttrycket ändras kan underkomponenten se uppdateringen.

I ditt fall initialiserar du helt enkelt ingången till underkomponenten med värdet av uttrycket visible med hjälp av interpolation. Men då kommer inte din underkomponent att se uppdateringar.

Dessutom, i ditt fall, tillhandahåller du en sträng och inte en boolean. Endast egenskapsbindning tillåter att tillhandahålla typer som är olika sträng...

Se den fungerande plunkr: https://plnkr.co/edit/z7rKGb6mLdLNj2jtSlcU?p=preview.

Svar #2

Använd istället

<my-form [details]="visible"></my-form>

Plunker

<my-form details="{{visible}}"></my-form>

passerar 'true' till visible (omvandlar till sträng). Med [details] skickas det omodifierade värdet. Därför måste detta formulär användas om du vill skicka något annat än en string.