2

我有一个组件：

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

这可能吗？

谢谢

4

2 回答 2

0

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

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>
于 2019-06-11T14:03:07.867 回答
0

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>

将数组传递给孩子，然后在父母中枚举它。还不如直接在父级中枚举。所以不，在我看来，它不像你想要的那样工作。

于 2019-06-11T12:12:41.067 回答