在angular2中重新加载div

Question

Im calling an api in my html component. But I need to refresh it each time to be able to see the data.

html component:

<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;
}

}

How do I reload div without refreshing the entire page?

Answer 1

In order to update the template with the latest data, first import ChangeDetectorRef

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

initialize it in your constructor

constructor(private cd : ChangeDetectorRef){}

and in the success part of your API call subscribe, once you've updated your variables, manually trigger template change detection with

  this.cd.detectChanges();

This should do the trick if because of any reason your change detection is not occuring automatically.