'Angular show fetched data after click dropdown button

I use angular at the frontend and .net core at the backend. I have a trivial problem and figure it with a video below. I spend hours and hours and still couldn't solve the problem.

I simply fetch data from my web api. And use *ngFor for display the data. But the problem is data is not shown before click any dropdown button. Btw, dropdown button does not have any click event. It's simple language selector. When I click language selector dropdown button, it expands and at the same time my data display on the screen.

I get my data ngOnInit. I check the data on debug mode and it's ok. I really spend hours and hours...still couldn't find any solution.

My html code :

<div class="container">
    <div *ngFor="let d of devices"> --> I put here breakpoint and it run when I click dropdown btn
      <span>{{d.name}}</span>
    </div>
  </div>

My .ts code:

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { Observable } from 'rxjs';
import { Pagination } from '../../../_helpers/Pagination';
import { deviceListModel, NewDeviceModel } from '../../admin-panel.model';
import { AdminPanelService } from '../../admin-panel.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  devices : Array<deviceListModel>; ---> I also try with public deviceList : deviceListModel[]; nothing change

  constructor(private service : PanelService, private router : Router) { }

  ngOnInit(): void {
    
   this.getDeviceList();
  }

  getDeviceList() {
    this.service.getDeviceList().subscribe(res => {
      this.devices = res;
    })
  } ---> This part works fine. Data comes true from the backend before click the dropdown button.(I checked in debug mode with breakpoints)

}

Visiulize my problem with below link; https://media.giphy.com/media/jYGHN1Ndxyeqhtn0ZR/giphy.gif

fullscreen with low res : https://giphy.com/gifs/jYGHN1Ndxyeqhtn0ZR/fullscreen

Edit : When I try just display one of the data like devices[0].name;

<div>
  <span> {{devices[0}.name}} </span>
</div>

I get data on page but with an error in console.

The error comes three times and the error is ; core.js:4352 ERROR TypeError: Cannot read property '0' of undefined

htmlasp.netangularasp.net-core


Solution 1:[1]

Try putting the this.devices = res; into the NgZone

constructor(..., private _ngZone: NgZone)

this._ngZone.run(() => { this.devices = res; });

Solution 2:[2]

Can you try to put an *ngIf in the container? Like so:

<div class="container" *ngIf="devices?.length">
  <div *ngFor="let d of devices">
    <span>{{d.name}}</span>
  </div>
</div>

In this case, the template will only be rendered when the backend call has completed successfully (and has results).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vijay Kumawat
Solution 2 undrivendev

Related Questions