@Input：两种方式数据绑定不起作用

Posted 2023-02-23

【中文标题】@Input：两种方式数据绑定不起作用

【英文标题】：@Input: Two way data binding not working

【发布时间】：2017-04-06 10:41:51

【问题描述】：

我正在尝试复制这个：http://plnkr.co/edit/OB2YTMJyeY3h9FOaztak?p=preview （这个 plunker 是有效的示例，我想获得相同的结果，但我的代码不起作用） p>

================================================ ====================

我有这个简单的双向绑定，我正在尝试更新一个字符串属性，例如父级和子级的字符串属性

问题：当点击“从父级更新”时，两个绑定都会更新。但是当点击“从孩子更新”时，只有孩子更新！

这看起来很简单，我做错了什么？

（注意：我使用 angular CLI 来运行项目）

================================================ ====================

父组件：

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-my-dad',
  templateUrl: './my-dad.component.html',
  styleUrls: ['./my-dad.component.css']
)
export class MyDadComponent 

  parentModel: string;

  constructor() 

  updateModel()
    this.parentModel += ' parent';
  

父模板

<h2>Parent:  parentModel  </h2> 
<button (click)="updateModel()"> update from parent </button>

<app-my-child [(model)]="parentModel"></app-my-child>

子组件

import  Component, OnInit, Input  from '@angular/core';

@Component(
  selector: 'app-my-child',
  templateUrl: './my-child.component.html',
  styleUrls: ['./my-child.component.css']
)
export class MyChildComponent 

  @Input() model: string;

  constructor()  

  updateModel()
    this.model += ' child';
  

子模板：

<h2>Child:  model  </h2>
<button (click)="updateModel()"> update from child </button>

【参考方案1】：

对于使用 [(xxx)] (banana-in-a-box) 语法的双向绑定，您需要一个 @Input() 和一个 @Output() 并具有匹配的名称，例如：

@Input() myProp:String;
@Output() myPropChange:EventEmitter<String> = new EventEmitter<String>();

另请参阅指南https://angular.io/docs/dart/latest/guide/template-syntax.html#!#two-way

要使用ngModel 进行双向绑定，您的组件需要实现ControlValueAccessor。

另见：

https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html https://github.com/angular/angular/issues/11073#issuecomment-242563788

【讨论】：

成功了！但是为什么我不能复制我发布的那个 plunker 中的内容？ (plnkr.co/edit/OB2YTMJyeY3h9FOaztak?p=preview) 也许它已被弃用？谢谢！

现在可以运行 Plunker 但无法重现。无论我按什么按钮，两个字符串都会更新。

那个 plunker 就是一个有效的例子！但是我的代码（这同样足够）没有！

您能详细说明一下吗？我一直在尝试对容器类做几乎同样的事情。当将容器类传递给子 (<child [(thing)]="myInstance"></child>) 并绑定到 [(ngModel)]="thing.memberName" 时，我可以使用双重绑定，但不能使用 <child [(thing)]="myInstance.memberName"></child>。欢迎任何意见:)

“匹配名称”部分很重要！我没有在角度文档中找到它。非常感谢！ :)

【参考方案2】：

对上面的@Gunter 做一个总结性阐述：

子组件必须具有匹配的EventEmitter 属性类型，具有相同的数据类型泛型并用@Output() 装饰 必须调用上述属性的emit方法。此调用通常在更改子属性值的方法中进行。

所以，你的代码必须有：

@Output() modelChange: EventEmitter<String> = new EventEmitter<String>(); 在子组件中。 this.modelChange.emit(model);（调用 emit 方法）在子组件的 updateModel() 方法中。