在 ngFor 中对不同的对象使用 ngContent

Question

我有一个组件：

@Component({
selector: 'app-my-component',
templateUrl: './my-component.html'
})
export class MyComponentComponent {
@Input() values;    
}
<div *ngFor="let value of values">
<ng-content></ng-content>
</div>

使用组件时，我希望将div 的模板传递到组件中，以便它可以与不同的对象类型一起使用。

<app-my-component [values]="myVals">      
<div>{{value.name}}</div>
<div>{{value.age}}</div>
<div>{{value.address}}</div>
</app-my-component>
<app-my-component [values]="myDifferentVals">      
<div>{{value.company}}</div>
<div>{{value.phone}}</div>
<div>{{value.email}}</div>
</app-my-component>

这可能吗？

谢谢

Answer 1

ng-content 允许您在子组件的"内部"呈现父组件的内容。

<app-my-component>    
<div *ngFor="let value of myVals">  
<div>{{value.name}}</div>
<div>{{value.age}}</div>
<div>{{value.address}}</div>
<div>
</app-my-component>

将数组传递给子数组，然后在父级中枚举它。 不妨直接在父级中枚举它。 所以不，在我看来，它没有按照您的意图工作。

Answer 2

有两种可能的方法可以做到这一点：

1) 在父组件中迭代数组

在这种情况下，可能不需要将数组作为输入传递。这取决于您的要求和实施。

<app-my-component>    
<ng-container *ngFor="let value of myVals">  
<div>{{value.name}}</div>
<div>{{value.age}}</div>
<div>{{value.address}}</div>
<ng-container>
</app-my-component>

<app-my-component> 
<ng-container *ngFor="let value of myDifferentVals">     
<div>{{value.company}}</div>
<div>{{value.phone}}</div>
<div>{{value.email}}</div>
</ng-container>
</app-my-component>

2) 仅在子组件中迭代数组。

使用 my-component 的组件，

<app-my-component [values]="myVals" [keys]=['name','age','address']>
</app-my-component>
<app-my-component [values]="myDifferentVals" [keys]=['company','phone','email']>          
</app-my-component>

在我的组件中，

@listOfKeys: string[] = [];
<div *ngFor="let value of values">
<div *ngFor="let key of keys">
{{value[key]}}
</div>         
</div>