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>

＆＃34; showAnimation＆＃34;是一个变量，我使用（单击）事件在第二个组件中动态更改。现在的问题是：即使插值（1）按预期工作并反映值的变化，ngIf（2）似乎也不会受到影响。我尝试过使用get属性，不同的模板语法，但是更改并没有反映在ngIf中。我检查了事件ngonchanges，值正在变化。

在文档中进行了几个小时的测试和研究后，Google和我在这里了解到我的代码未能报告该属性的更改。但我无法弄清楚原因，我缺少什么，以及如何解决它。愿任何人向我解释为什么我会得到这种行为以及如何解决这个问题？

Answer 1

你可以试试这个：

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

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

1 个答案: