<thead/>で反復処理中にテンプレートを選択する方法は？

Question

私は配列があります。

let headers = [ 
    { title: 'First Name', style: 'bold' }, 
    { title: 'Last Name', style: 'bold' },    
    { title: 'Book', style: 'bold', titleSecond: 'All/Remainder', style2:'not bold' }, 
    { title: 'City', style: 'not bold', titleSecond: 'Street', style2: 'not bold' } 
    ]; 

を、私は、単純なHTMLテーブルを反復処理しています：

<table> 
    <thead> 
     <tr> 
      <th *ngFor="let header headers"> 
       {{ header.title }} 
      </th> 
     </tr> 
    </thead> 
</table> 

は次のようになりますテーブルヘッダを作成することが可能です：

テーブルヘッダーのテンプレートをいくつか作成できますか？このheadersオブジェクトを変更したいので、オブジェクトを変更することができます。

Answer 1

あなたは条件付きで再利用可能なコンポーネントの中で、この特定のロジックを作りたい場合は、子コンポーネントを作成する必要が* ngIf

<th *ngFor="let header headers"> 
<span *ngIf="header.style==='bold'"> <b>{{ header.title }}<b></span> 
<span *ngIf="header.style!='bold'"> {{ header.title }} 

<br> {{header.titleSecond}} 
</th> 

を使用して、大胆に変更することができます子コンポーネントにヘッダーを渡します。子コンポーネントからは

<th *ngFor="let header headers"> 
    <your-childcomponent [header]="header"></your-childcomponent> 
    </th> 

子コンポーネント

 import { Component, Input, } from '@angular/core'; 
@Component({ 

    selector: 'your-childcomponent', 
    templateUrl: "YourChildComponent.html" 
}) 
     export class YourChildComponent { 
      @Input() header:any; 

     } 

@Input で値を取得しますYourChildComponent.html

<span *ngIf="header.style==='bold'"> <b>{{ header.title }}<b></span> 
    <span *ngIf="header.style!='bold'"> {{ header.title }}</span> 
<br> {{header.titleSecond}} 

私はあなたが期待しているこのことを願っています