角度等待直到绑定完成

Question

In the purpose of scrolling to an element of a list after the view initialization completes, I'm trying to getElementById of an element that will be put into the DOM by an " *ngFor " after making an HTTP call,

But the getElementById always returned null until I surround it with a setTimeout of 3sec, so it returns the element.

So I'm searching for a clean solution to wait until the binding into the view completes before I make getElementById.

component.ts:

  InitDisponibilites(disponibilites) {
    this.disponibilites = Array();
    for (let disponibilite of disponibilites) {
      this.addDisponibilite(disponibilite);
    }

    setTimeout(()=>{

      let index = this.getElementIndexToScroll();
      let el = document.getElementById('dispo' + index) as HTMLElement;
      el.scrollIntoView();

    },3000);

  }

Answer 1

You can move that code either into ionViewDidEnter or ionViewWillEnter methods, those events are called based on ionic lifecycle. You can choose any of the two, depends on how soon you want the scroll effect.

Find more about ionic lifecycle events here

If your use case lies in the subcomponent of a page, then you can't use ionic lifecycle event directly, instead use @ViewChild to access your component method to be called with page event.

@ViewChild(childComponent) childComponent: ChildComponent;
----------------------
----bunch of code ----
----------------------
ionViewWillEnter() {
    this.childComponent.willEnter(); //scroll logic will go inside the willEnter method.
}

UPDATES
If you are populating the child components as response to http, you can try using angular lifecycle event associated with the component ngAfterViewInit() , then check if given component index is the desired index, scroll it into the view.

childcomponent.html

<div #rootDiv [selected]="index === getElementIndexToScroll()"></div>

childcomponent.ts

export class ChildComponent implements AfterViewInit {
   @ViewChild('rootDiv') rootElement: ElementRef;
   @Input() selected: boolean;

  ngAfterViewInit() {
    if (this.selected) {
       this.rootElement.nativeElement.scrollIntoView();
    }
}