typescript - Uppdatera NgIf-värde med en @input-egenskap i Angular2

God kväll. Detta är min första fråga här, jag förväntar mig att inte röra till det. Jag försöker dölja/visa en HTML-fragment i en komponent med ett värde som jag fick från en annan komponent genom en @input-egenskap, min faktiska kod ser ut så här:

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() {    
    }    
}

Jag använder det så här i en annan komponent:

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

"showAnimation" är en variabel som jag dynamiskt ändrar i den andra komponenten med en (click)-händelse. Nu är problemet: även om interpoleringen (1) fungerar som förväntat och speglar värdeförändringen verkar ngIf (2) inte påverkas. Jag har försökt använda en get-egenskap, olika mall-syntaxer men ändringen speglas inte i ngIf. Jag kontrollerade händelsen ngonchanges och värdet ändras.

Efter några timmars testning och forskning i dokumentationen, Google och här, förstod jag att min kod misslyckas med att rapportera ändringen på egenskapen. Men jag kunde inte lista ut orsaken, vad jag missar och hur man löser det. Kan någon förklara för mig varför jag får detta beteende och hur jag skulle kunna lösa det?

Svar #1

Kan du prova detta:

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