Angular 2 [ typescript] 使用 json 模型从子组件 UI 更新父组件 UI 的模型值答案

【问题标题】：Angular 2 [ typescript] Updating a model value of parent component UI from a child component UI with json modelAngular 2 [ typescript] 使用 json 模型从子组件 UI 更新父组件 UI 的模型值
【发布时间】：2016-12-10 03:13:22
【问题描述】：

如何将 json 'oup' 值从子组件更新到父组件。当我尝试将具有输出事件的子模型的值更新到父组件时，没有任何效果。

我在下面给出了所有细节

处理的数据：

   json: [{
      "inp": "hello",
      "oup": "fello"
 }]

父组件

  // Parent Component
 @Component({
 selector: 'parent',
 template: `
    <div>Parent sharedVarParent: {{sharedVarParent[0].oup}}
    <input type="text" [ngModel]="sharedVarParent[0].oup"/>
    </div>
    <child [(sharedVar)]="sharedVarParent"></child>

      `,
     directives: [ChildComponent]
 })
 export class ParentComponent {
  sharedVarParent =[{
                     "inp": "hello",
                     "oup": "fello"
                    }]

  constructor() { console.clear(); }
 }

子组件

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

   // Child Component
  @Component({
    selector: 'child',
    template: `
    <p>Child sharedVar: {{sharedVar[0].oup}}</p>
    <input [ngModel]="sharedVar[0].oup" (ngModelChange)="change($event)">
    `
   })
   export class ChildComponent {
   @Input() sharedVar: string;
   @Output() sharedVarChange = new EventEmitter();
   change(newValue) {
      console.log('newvalue', newValue)
      this.sharedVar = newValue;
      this.sharedVarChange.emit(newValue);
  }
 }

【问题讨论】：

当它实际上是Array<any> 或具有“inp”和“oup”属性的任何类型的数组时，您将其声明为字符串。我不认为这是问题所在。似乎您正在将输入的模型设置为数组中第一个元素（字符串）的“oup”属性并在更改中发出它。这不会用输入到输入中的字符串值覆盖sharedVarParent（对象数组）吗？
@JasonGoemaat 即使更改了数据类型 @Input() sharedVar: Array 问题仍然存在，请问还有其他建议吗？谢谢。
Angular 似乎不会将 nutbox 输入 for primitives 确认为与父级关联。 <input name="parent-notes" [(ngModel)]="parent.notes" /> 将起作用，因为原始值 (notes: string) 是在对象的命名空间之外声明的；但<input name="child-notes" [(ngModel)]="notes" /> 似乎失去了对父母和祖父母的提及。这与 Angular1.x 中的情况没有什么不同，因为您必须使用愚蠢的对象来保持数据绑定活动。但是他们怎么可能在 ng2 中忽略了这一点？？？我猜你必须使用ControlValueAccessor。

标签： json typescript angular parent-child

【解决方案1】：

这对我来说有点奇怪。您将 fello 值分配给输入，然后发出更新的值。在我看来，您想发出更改后的sharedVar

<input [(ngModel)]="sharedVar[0].oup" (ngModelChange)="change()">

change() {
  this.sharedVarChange.emit(sharedVar);
}

【讨论】：

我试过你的解决方案，它没有更新父组件上的 UI 模型。任何实现这种情况的建议，谢谢。
能否提供Plunker进行复现和调查？ (模板angular.io/resources/live-examples/quickstart/ts/plnkr.html)
我不知道你到底想完成什么，但如果你修改同一个对象，你甚至不需要@Output()。如果您绑定到该值，则父级只会通知更改。如果您想将更改通知父级，您可以为父级发出 any 值，以了解该值已更改（不传递实际值）。 plnkr.co/edit/GV2whC?p=preview
从您的代码中，我了解发出事件和更改同一对象的目的。非常感谢：）。它对我有帮助
你为什么要使用 Array？我尝试使用字符串但无法正常工作。你能解释一下为什么会这样吗？

【解决方案2】：

您是否有理由将数组作为输入而不是字符串作为输入？ plnkr

看your sample有一些奇怪的事情：

您的父输入是一种单向绑定，我不知道这是否让您感到困惑，这是不寻常的，并且会增加问题(fixed)
```
  <input [(ngModel)]="sharedVarParent[0].oup"/>
```
由于数组是通过引用作为输入传递的，因此实际上不需要子组件的输出，除非您正在创建一个新数组，只需在子组件的输入上使用双向绑定，它就会更新共享数组中第一个对象的属性(sample)
```
<input [(ngModel)]="sharedVar[0].oup">
```
1. 当孩子的文本框值更新时，您正在混合传递sharedVar 数组作为输入和从发射器输出字符串。发生这种情况时，父级中的绑定将 sharedVarParent 更改为字符串，从而搞砸了整个事情。当父级实例化子级时，它将输入sharedVar 设置为数组。当您在孩子的文本框中输入时，它会输出一个字符串，并且父级将sharedVarParent 更改为一个字符串，然后将其作为输入发送给孩子。 plnkr

【讨论】：