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）遍历父组件中的数组

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

<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>

在ngFor中将ngContent用于不同的对象

2 个答案: