如何在<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> 

如果你想使這個特定的邏輯，以可重用的組件，你必須創建一個子組件並將標頭傳遞給子組件。從子組件，您將得到與值@input

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

     } 

YourChildComponent.html

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

我希望你期待