typescript - 在 Angular2 中使用 @input 属性更新 NgIf 值

Question

晚上好。这是我的第一个问题，我希望不要搞砸。我试图使用通过 @input 属性从另一个组件获取的值来隐藏/显示组件中的 HTML 片段，我的实际代码如下所示:

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) 按预期工作并反射(reflect)了值的变化，ngIf (2) 似乎也没有受到影响。我尝试过使用 get 属性、不同的模板语法，但它的更改没有反射(reflect)在 ngIf 中。我检查了事件 ngonchanges ，值正在变化。

经过几个小时在文档、Google 和此处的测试和研究后，我了解到我的代码无法报告属性的更改。但我无法弄清楚原因、我缺少什么以及如何解决它。有人可以向我解释为什么我会出现这种行为以及如何解决它吗？

Answer 1

你能试试这个吗:

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