与角性质性质的直接结合
我有个这样的模特：
export class Person{
name: string;
}它用于我的组件中，如下所示：
export class TestComponent {
@Input() person : Person;
constructor() {
}
}我希望将html中的人名设置为：
<app-test [person.name]="'Jack'"</app-test>当我这么做的时候，angular很生气：“不能绑定到'person.name‘，因为它不是’app-test‘的一个已知属性。”
嗯，他是对的，人是我的财产，而不是person.name
另一方面，我们在以下示例中没有任何错误：
<span [style.color]="'red'">This span is red.</span>我是在违反规则吗？
还是风格属性在内部是不同的？多么?
谢谢
回答 4
Stack Overflow用户
发布于 2020-02-02 15:15:37
Stack Overflow用户
发布于 2020-02-02 15:17:15
你是对的，ngStyle是不同的，风格也不同，你需要
<app-test [person]="{name:'Jack'}"</app-test>其他选择包括
<app-test [person]="person"</app-test>在你的main.app里
this.person.name='Jack'请记住，如果在输入中使用对象，则父或子对象的属性的任何更改都会更改对象的“属性”。
Stack Overflow用户
发布于 2020-02-02 15:27:48
这是因为您试图传递给Test的输入属性是"person.name"，它没有在您的Test上定义。您的需要一个名为"person“的东西。其次，您传递的是一个字符串，而不是您在Test组件上定义的Person类型。更改Test组件以接受字符串或传递Person，并在Test组件中引用name属性。并确保名称与匹配。
下面是两种可以考虑将人的姓名传递给另一个组件的方法
<app-test [name]="person.name" [person]="person"></app-test>
然后在Test组件中：
export class TestComponent {
@Input() name: string;
@Input() person : Person;
}注意到名字和类型是如何匹配的？我的建议是，不要超过你的需要。如果只需要传递Person名称，只需让组件接受一个字符串即可。不需要传递整个对象。
TestComponent模板：
<h1>Person: {{person.name}}</h1>
<h1>Name: {{name}}</h1>我将添加到角文档的链接，因为我认为它是角的一个非常重要的部分，您可能想回顾一下。他们的英雄教程真的很好。
https://stackoverflow.com/questions/60027244
复制相似问题
腾讯云开发者
