angular2 ngModel,其值来自@Input

发布时间：2020-12-17 17:42:59 所属栏目：安全来源：网络整理

导读：我正在尝试在我的子组件中使用[(ngModel)],其中一个字符串通过@Input()从我的父组件传递到我的子组件. 然而,双向绑定似乎不起作用.字符串正确地从父项传入,但是当我在子项中编辑它时,父项的值不会更新. 我错过了什么？家长： @Component({ selector: 'my-ap

我正在尝试在我的子组件中使用[(ngModel)],其中一个字符串通过@Input()从我的父组件传递到我的子组件.

然而,双向绑定似乎不起作用.字符串正确地从父项传入,但是当我在子项中编辑它时,父项的值不会更新.

我错过了什么？

家长：

@Component({
  selector: 'my-app',template: `
    <div>
      <child [(value)]="name"></child>
      <p>{{name}}</p>
    </div>
  `,})
export class App {
  name:string = 'MyValue';
  constructor() {

  }
}

儿童

import {Component,Input} from '@angular/core'

@Component({
  selector: 'child',template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value"></textarea>
    </div>
  `,})
export class Child {


  @Input() value:string;

  constructor() {

  }
}

我创建了一个plnkr来说明问题：https://plnkr.co/edit/jCF5kt73P38EFYUAZF6l

解决方法

您需要输出来通知有关更改：

import {Component,template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value" (ngModelChange)="update($event)"></textarea>
    </div>
  `,})
export class Child {


  @Input() value:string;
  @Output() valueChange:EventEmitter<string> = new EventEmitter<String>()

  update(value) {
    this.valueChange.emit(value);
  }

  constructor() {

  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!