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根据组件父级的输入创建循环名称属性？

所以在html中可以写

家长html

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

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

例如，如果有一个列表

用户列表
节目单

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

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

1 个答案: