javascript - Angular 4 模板中的 bool 值

Question

我正在使用 Angular 4。

我有一个简单的组件，称为价格差异。我想决定是否显示标题:

<price-difference showHeader="true"></price-difference>

在 PriceDifferenceComponent 中:

@Input() showHeader: boolean;

在模板中:

<div class="header-container" *ngIf="showHeader == true">
    <h3>some header</h3>
</div>

showHeader is {{ showHeader }}
<br /> 
showHeader == true is {{ showHeader == true }}

即使 showHeader 为 true，标题也不会显示。在模板中我看到:

showHeader is true 
showHeader == true is false

去弄清楚那个。

如何让模板将 showHeader 视为 bool 值？

Answer 1

您必须输入 [ ]围绕绑定(bind)变量:

<price-difference [showHeader]="true"></price-difference>