Angular 5 @input()对象属性绑定错误

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (177)

我不确定我得到的错误是:

***ERROR**: Can't bind to 'obj.Name' since it isn't a known property of 'comp'.*

Angular不允许这种行为的结果。目的只是绑定到@input对象属性。

代码:

// comp.component.ts
...
@Input() obj: ObjType = {
Name: ''
}

// comp2.html
...
// this HTML is passing the value from comp2.html to comp component
<app-comp [obj.Name]="MyNameIs"></app-comp>

我希望将“MyNameIs”值传递回obj.Name属性,但是我收到了上述错误。这是我正确做的事情,还是Angular(v5)没有做的事情?

提问于
用户回答回答于

@Input 保留给父组件到子组件属性绑定。

例如: parent.component.ts应包含一个属性:

public myNameIs = { name: 'Marie Curie'};

parent.component.html在父模板中包含子组件并绑定到属性:

<child-comp [obj]="MyNameIs"></child-comp>

child.component.ts在子组件内部使用@Input装饰器绑定到属性。

@Input() obj: ObjType = {}

child.component.html然后,您可以在子组件或模板中使用该属性。

<h3> {{obj?.name}}</h3>

在您的情况下,您无法绑定obj.Name,因为Input()装饰器绑定到对象obj而不是特定属性 obj.Name你需要做的就是修复你的错误就像传递的值一样:( <child-comp [obj]="MyNameIs"></child-comp>参见我制作的StackBlitz工作。)

扫码关注云+社区

领取腾讯云代金券