角度属性的动态添加

Question

假设我必须显示一个联合图，所以我有不同的组件，corp、department、employee。

而不是在corp或department HTML的HTML部分中做所有的事情，像这样.

<corp>
    <department [...]>
        <employee name="John" isChief sex="m" picture="/john.jpg" />
        <employee name="Lucie" sex="f" picture="/lju.jpg" />
    </department>
</corp>

..。我希望在TS组件的department部分中有一个雇员控件的动态列表

employees: [
 { name: John, isChief: true, sex: m, picture: '/john.jpg'},
 { name: Lucie, sex: f, picture: '/lju.jpg'}
]

并由此在TS中生成department.html组件中的一个.html组件列表。

重要：i强调我希望使用员工组件列表，而不是直接处理department组件中的员工业务对象:显示员工业务对象的逻辑应该保存在Employee专用组件中，只有每个员工的属性才能保存在部门组件的逻辑(ts)部分，而不是图形(html)组件中。

Answer 1

你是有意这么做的吗？

<corp>
    <department [...]>
        <employee *ngFor="let employee of employees" 
                  name="{{employee.name}}" 
                  [isChief]="employee.isChief ?? false" 
                  sex="{{employee.sex}}" 
                  picture="{{employee.picture}}" />
    </department>
</corp>

*ngFor循环将创建与employees数组中的项相同的employee元素。

但是，您必须修改数组，如下所示：

employees: {name: string, sex: "m"|"f", picture: string, isChief?: boolean}[] = [
 { name: John, isChief: true, sex: m, picture: '/john.jpg'},
 { name: Lucie, sex: f, picture: '/lju.jpg'}
]