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>

这允许使用属性绑定，即单向绑定（通过引用）。这意味着当提供的表达式更改时，子组件可以看到更新。

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

此外，在您的情况下，您提供的是字符串而不是布尔值。只有属性绑定允许提供与string不同的类型...

参见work plunkr：https://plnkr.co/edit/z7rKGb6mLdLNj2jtSlcU?p=preview。

Answer 2

改为使用

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

Plunker

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

将'true'传递给visible（字符串化）。使用[details]传递未修改的值。因此，如果您想传递与string不同的任何内容，则必须使用此表单。

Angular2表单字段不会在@input变量上切换

2 个答案: