具有列表动态输入属性的角组件答案

【问题标题】：Angular component with dynamic input properties for list具有列表动态输入属性的角组件
【发布时间】：2017-04-26 16:35:48
【问题描述】：

只是想知道这是否可能

场景是：我想使用*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 是否可以根据父组件的输入创建循环名称属性？

所以在html中可以写

父 html

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

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

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

用户列表
节目列表

但是，name 属性的数据对于用户列表是 .name，对于程序列表是 .programName。能否将*ngForloop中的item属性定义为父组件的输入值？

所以不管item.name 是什么，基本上都是创建一个通用的*ngFor。循环中子组件的名称将显示为item.name 或item.programName

【问题讨论】：

传入要显示的属性的名称。我没有看到问题。
你会如何在循环中引用它？因为在循环*ngFor="let item of list" 中，需要根据list 中的属性在循环中引用item ... 对吗？

标签： angular angular2-components

【解决方案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>

【讨论】：