Question

我在我的html组件中调用api。但我每次都需要刷新才能看到数据。

html组件：

<div>
<div *ngIf="reloadiv" class='tableauPlaceholder' style='width: 1353px; height: 595px;'>
<object class='tableauViz' width='1353' height='595' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Fmbi-tab.abc.com%2F' />
<param name='site_root' value='&#47;t&#47;IT' />
<param name='name' value='TPO&#47;ModelOutputMMX' /><param name='tabs' value='no' />
<param name='toolbar' value='yes' /><param name='showShareOptions' value='true' />
</object></div>

</div>

component.ts：

import { Component, OnInit } from '@angular/core';


@Component({
selector: 'model1',
styleUrls: ['./model1.scss'],
templateUrl: './model1.html'
})


export class model1 implements OnInit {
private reloadiv: boolean = false;
ngOnInit() {
console.log("Init invoked");
this.reloadiv = true;
}

}

如何在不刷新整个页面的情况下重新加载div？

Answer 1

要使用最新数据更新模板，请先导入ChangeDetectorRef

import {ChangeDetectorRef} from '@angular/core';

在构造函数中初始化它

constructor(private cd : ChangeDetectorRef){}

在您的API调用订阅的成功部分中，一旦您更新了变量，手动触发模板更改检测

  this.cd.detectChanges();

如果由于任何原因您的更改检测未自动发生，这应该可以解决问题。

以角度2重新加载div

1 个答案: