具有动态输入属性的角组件

Question

只是想知道这是否完全可能

场景是：我想使用*ngFor创建一个列表组件，但是我想要嵌入组件本身的*ngFor

foo-list-items.html (component(

<ul>
   <li *ngFor="let item of list" (click)="goto(item)">
       {{ item.name }}<br />
       <small> Email: {{ item.email }} </small>
   </li>
</ul>

@Input() name:any可以根据组件父的输入来制作循环名称属性？

所以在html中可以写

父html

<foo-list-items [list]="usersList" 
                (onItemClicked)="gotoUser($event)" 
                [name]="item.name">
</foo-list-items>

其中 [name]="item.name"是传递到子组件的动态属性，在循环中引用。

因此，如果一个人有2个列表

1. 用户列表

2. 程序列表

但是，name属性的数据是用户列表的.name，程序列表的.programName。您可以将*ngFor循环中项目的属性定义为父组件上的输入值吗？

因此，无论item.name是什么，基本上都会创建通用的*ngFor。item.name或item.programName

Answer 1

您可以将字符串作为输入属性传递给foo-list-items组件，例如：

<foo-list-items [list]="usersList" 
            (onItemClicked)="gotoUser($event)" 
            [name]="'name'">
</foo-list-items>

或

<foo-list-items [list]="programList" 
            (onItemClicked)="gotoUser($event)" 
            [name]="'programName'">
</foo-list-items>

然后在组件模板中使用数组键(object['property'](，而不是点符号：

<ul>
  <li *ngFor="let item of list" (click)="goto(item)">
   {{ item[name] }}<br />
   <small> Email: {{ item.email }} </small>
  </li>
</ul>