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

如果你想把这个特定的逻辑放到可重用组件中，你必须创建一个子组件并将 header 传递给子组件。从子组件中，您将使用 @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}}

我希望这是你所期待的