Question

我有一个Angular 2组件，如下所示：

<div *ngIf="Data"> This is my data: {{Data}} </div>

哪些输出（为方便起见，假装数据只是一个字符串说“数据”）

This is my data: Data

在我的控制器的OnInit函数中，我订阅了一个不时更新此Data对象的observable。我的Controller的onInit函数如下所示：

ngOnInit() {
    this.dataEvent.subscribe(Data=> this.Data = Data);
}

更新发生时，组件会意识到已发生更改，并显示新数据。但是不清楚旧数据，所以我最终得到：

This is my data: DataThis is my data: NewData

我试图在渲染新数据之前清除DOM元素，以便我的组件只显示

This is my data: NewData

在observable触发更新后。我也有类似的问题与* ngFor，但我认为两者都有一个共同的解决方案。

Answer 1

好的，所以我很蠢，并没有注意到我应该有的控制台警告。我正在运行typescript 2.6.0但我正在处理的角度项目需要一个旧版本。警告是：

@angular/compiler-cli@4.3.6 requires typescript@'>=2.1.0 <2.4.0' but 2.6.0 was found instead. 

Using this version can result in undefined behaviour and difficult to debug problems. 

Please run the following command to install a compatible version of TypeScript. 

    npm install typescript@'>=2.1.0 <2.4.0' 

To disable this warning run "ng set --global warnings.typescriptMismatch=false".

简单地跑：

npm install typescript@2.3.4

立即解决了我的问题。希望这有助于其他人不要浪费时间来尝试调试问题，而警告字面上说它可能导致难以调试问题＆gt;。

如何在第二次触发* ngIf时删除旧的DOM内容

1 个答案: