ngFor不会在NavigationEnd事件Angular 6+上加载动态填充的数组

Question

Having problem displaying array with ngFor on NavigationEnd Event, in the constructor of my class

testArray = [];

constructor(private activatedRoute: ActivatedRoute, private router: Router) {
    this.router.events.forEach(event => {
        if (event instanceof NavigationEnd) {
            this.testArray = [1, 2, 3,4];
        }
    });
}


<ol class="breadcrumb">
    <li *ngFor="let element of testArray"
        class="breadcrumb-item">
        {{element}}
    </li>
</ol>

Even though the array is populated when the NavigationEnd event happens, it does not display the contents of the array. The html page does not seem to reload with new Array data. Any help would be appreciated.

Thanks

Answer 1

Use setTimeout while setting the value.

   testArray = [];
       constructor(private activatedRoute: ActivatedRoute,
              private router: Router) {
    this.router.events.forEach(event => {
      if (event instanceof NavigationEnd) {
        setTimeout(()=>{
           this.testArray = [1, 2, 3,4];
        });

      }
    });
  }

Answer 2

Is better if you use async pipe here

testArray: Observable<number[]>;

constructor(private activatedRoute: ActivatedRoute, private router: Router) {
    testArray = this.router.events.pipe(filter(event) => event instanceof NavigationEnd).map(() => [1, 2, 3,4])
}

<ol class="breadcrumb">
    <li *ngFor="let element of testArray | async" class="breadcrumb-item">
        {{element}}
    </li>
</ol>

Answer 3

The view seems to be loaded before the array population. You can try to make your class implement "OnInit" available from "@angular/core" and make the foreach on "ngOnInit" method :

ngOnInit() {
    this.router.events.forEach(event => {
      if (event instanceof NavigationEnd) {
        this.testArray = [1, 2, 3,4];
      }
    });
  }