Использование ngContent в ngFor для разных объектов - PullRequest
Новая
       37

Использование ngContent в ngFor для разных объектов

2 голосов
/ 11 июня 2019

У меня есть компонент: 

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

Возможно ли это?

Спасибо

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Есть два возможных способа сделать это:

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>

В my-component, 

    @listOfKeys: string[] = [];

    <div *ngFor="let value of values">
      <div *ngFor="let key of keys">
          {{value[key]}}
      </div>         
    </div>
0 голосов
/ 11 июня 2019

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>

, передавая массив дочернему элементу, а затем перечисляя его в родительском компоненте.может также перечислить его в родительском напрямую.так что нет, это не работает так, как мне кажется, что вы намеревались.

...