Angular 具有列表动态输入属性的组件

Question

只是想知道这是否可能

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

foo-list-items.html（分量）

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

是否可以使用 @Input() name:any 根据组件 parent 的输入创建循环名称属性？

所以在 html 中可以写

Parent html

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

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

例如，如果一个人有 2 个列表

用户列表
节目列表

但是 name 属性的数据对于用户列表是 .name，对于节目列表是 .programName。您能否将 *ngFor 循环中的项目的属性定义为 parent 组件的输入值？

所以基本上创建了一个通用的 *ngFor，不管 item.name 是什么。 child 组件循环中的名称将显示为 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>

Angular 具有列表动态输入属性的组件

Angular component with dynamic input properties for list

angular2-components

angular