javascript - 在中迭代时如何选择模板？

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

我希望这是你所期待的