使用Angular2中的@input屬性更新NgIf值

晚上好。這是我的第一個問題，我希望不要搞砸。我試圖隱藏/使用我從另一個組件通過@input屬性有一個值顯示組件的HTML片段，我的實際代碼如下所示：使用Angular2中的@input屬性更新NgIf值

import { Component, OnInit, Input } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'test-animation', 
    template: ` 
     <h1>The value is {{show}} </h1> (1) 
     <span *ngIf="show"> show me! </span>` (2) 
}) 

export class TestComponent implements OnInit {  
    @Input() show: boolean = false;  
    constructor() { }  
    ngOnInit() {  
    }  
}

我使用它像這樣在另一種組分：

<test-animation show="{{showAnimation}}"></test-animation>

「showAnimation」是我動態在第二組分使用（點擊）事件改變一個變量。現在的問題是：即使認爲插值（1）按預期工作並反映了值的變化，ngIf（2）似乎也不受影響。我曾嘗試使用get屬性，不同的模板語法，但是它沒有反映在ngIf中。我檢查了事件ngonchanges和價值正在改變。

文檔中幾個小時測試和研究後，谷歌，在這裏，我明白了我的代碼被漏報的財產變化。但我找不出原因，我錯過了什麼，以及如何解決它。任何人都可以向我解釋爲什麼我會得到這種行爲，以及我如何解決這個問題？

來源

2016-07-08 Alex F.

你可以試試這個：

<test-animation [show]="showAnimation"></test-animation>

來源

2016-07-08 05:39:04 mvermand

'<測試動畫節目= 「{{showAnimation}}」>'將字符串' 「真」'或' 「假」 ''show] =「showAnimation」'傳遞'true'或'false'值（或showAnimation保存的任何值）。 '{{xxx}}總是在分配值之前對其進行串聯。 –

這正是我錯過了。非常感謝你的解釋，現在很清楚我的錯誤是什麼。 –

使用Angular2中的@input屬性更新NgIf值

回答

相關問題