javascript - ngIf 和 @Input angular2 奇怪的行为

Question

NgIf 似乎总是 true，即使控制台显示 false。

来自以下组件 html

 <product-component-tree itemSku="{{item.itemSku}}" selectable="false" classes="col-md-12 col-xs-12"></product-component-tree>

将 selectable 设置为 false...

export class ProductComponentTree {
@Input() classes: string;
@Input() itemSku: string;
@Input() selectable: boolean;
ngOnInit() {
    if (this.itemSku)
        this.productDetailService.getComponents(this.itemSku, true).subscribe(x => {
            this.treeData = x;
        });
    console.log(this.selectable); //prints false
}
}

组件的 HTML 模板:

<div class="{{classes}}" *ngIf="selectable">
    something
    <p-tree [value]="treeData" layout="horizontal" selectionMode="checkbox" [(selection)]="selectedProducts" (onNodeSelect)="nodeSelect($event)"></p-tree>
</div>
<div class="{{classes}}" *ngIf="!selectable">
    else
    <p-tree [value]="treeData" layout="horizontal" [contextMenu]="productTreeCm" selectionMode="single" [(selection)]="selectedProduct"></p-tree>
    <p-contextMenu #productTreeCm [model]="items"></p-contextMenu>
</div>

始终显示包含某些内容的 div!

目标:让它正常工作，如果 selectable 为 false，则显示 else div。

Answer 1

当您执行selectable="false"时，您将一个字符串值传递给组件。

而且，如您所知，“假”是一个真实值。 (否则，看看这个:https://dorey.github.io/JavaScript-Equality-Table/)

您需要执行以下操作:

<product-component-tree [itemSku]="item.itemSku" [selectable]="false" ...