typescript - Angular2 表单字段不会切换@input 变量

Question

在 Angular2 中我有一个非常简单的形式:

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() {

  }
}

如图所示Plunkr ，当我通过按钮切换 details @input 时，文本在 true 和 false 之间变化。

但是 *ngIf 根本没有切换文本框。

对我在这里想念的东西有什么想法吗？

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

Answer 1

您应该改用以下内容:

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

代替

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

这允许使用属性绑定(bind)，即单向绑定(bind)(通过引用)。这意味着当提供的表达式发生变化时，子组件可以看到更新。

在您的情况下，您只需使用插值法用表达式 visible 的值初始化子组件的输入。但是你的子组件将看不到更新。

此外，在您的情况下，您提供的是字符串而不是 bool 值。只有属性绑定(bind)允许提供不同于字符串的类型...

查看工作插件:https://plnkr.co/edit/z7rKGb6mLdLNj2jtSlcU?p=preview .