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

これを行うには、次の 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>
于 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 に答える