Angular show fetched data after click dropdown button

Question

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

Hi @devtnc, Please check this answer: stackoverflow.com/a/66997739/11398810 — Rena
– Rena, Commented May 20, 2021 at 5:18

CreepyRaccoon · Accepted Answer · 2023-05-04 16:32:15Z

1

I solved this problem with detectChanges();

add this line to the constructor:

private cdr:ChangeDetectorRef,

Then, write this line after filling your array:

this.cdr.detectChanges();

edited May 4, 2023 at 16:32

CreepyRaccoon

8971 gold badge11 silver badges21 bronze badges

answered Apr 30, 2023 at 9:51

Sarah

105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vijay Kumawat · Accepted Answer · 2021-05-19 13:22:10Z

0

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

constructor(..., private _ngZone: NgZone)

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

answered May 19, 2021 at 13:22

Vijay Kumawat

9835 silver badges9 bronze badges

1 Comment

devtnc Over a year ago

Nope, still same

undrivendev · Accepted Answer · 2021-08-05 10:29:28Z

0

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).

answered Aug 5, 2021 at 10:29

undrivendev

961 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular show fetched data after click dropdown button

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related