angular code not displaying data asynchronously

Question

Through (app.component.ts), I'm trying to get data from a service (mydb.service.ts) that displays after a delay of 10 seconds, and displays through the (aap.component.html) template.

mydb.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';

import { Restaurant } from './restaurant';

@Injectable({
  providedIn: 'root'
})
export class MydbService {

  private dbUrl = 'http://localhost:3000/api';  // URL to web api

  constructor( private http: HttpClient ) { }

  viewall(): Observable<Restaurant[]> {
    // This code below delays return for 10 seconds (to simulate real life delays)
    var start = new Date().getTime();
    while ((new Date().getTime() - start) < 10000) {
      n: 1;
    }
    console.log('10 secs over');
    return this.http.get<Restaurant[]>(this.dbUrl+'/view');
  }

}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Restaurant } from './restaurant';
import { MydbService } from './mydb.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myangular';
  restaurants$: Restaurant[];

  constructor(private dbService: MydbService) { }

  ngOnInit() {
    this.viewrestaurants();
  }

  viewrestaurants(): void {
    this.dbService.viewall()
      .subscribe((restaurants) => {
        this.restaurants$ = restaurants;
        console.log(restaurants);
      });
  }

}

app.component.html

test<br>
<li *ngFor="let restaurant of restaurants$">{{restaurant.restaurantName}}</li>

According to my logic, test is supposed to be displayed initially without any delay, and after 10 seconds the <li> items are to be displayed.However, on starting Angular the complete data in (app.component.html) displays only after 10 seconds. How to display the <li> items asynchronously?

try to add async pipe of angular here <li *ngFor="let restaurant of restaurants$ | async">{{restaurant.restaurantName}}</li> — Nirali
– Nirali, Commented Apr 2, 2019 at 8:11
when i use async i get the following error: ERROR Error: "InvalidPipeArgument: '[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'" — user3980196
– user3980196, Commented Apr 2, 2019 at 8:59

Ashish Ranjan · Accepted Answer · 2019-04-02 08:40:02Z

2

This happens because the way Browser handles parsing of HTML and Javascript, if there is a javascript operation needed to be done then the browser will wait for the script to finish the script then create the DOM, then the render tree and then a reflow and paint will happen on your screen.

The problem with your code is, you are making it too intensive on the CPU just so that you can wait for 10 seconds sybchronously for it to display the view.

Modify your method like below:

viewall(): Observable<Restaurant[]> {
    return this.http.get<Restaurant[]>(this.dbUrl+'/view').pipe(delay(10000));
}

edited Apr 2, 2019 at 8:40

answered Apr 2, 2019 at 8:11

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

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

2 Comments

user3980196 Over a year ago

debounceTime doesn't seem to cause any delay. after test is displayed the <li> populate immediately.

Ashish Ranjan Over a year ago

@user3980196 I have probably misunderstood debonceTime then, use delay instead

Jonas Praem · Accepted Answer · 2019-04-02 08:12:17Z

0

If you are using an observable directly in the markup you need to use the async pipe eg. <li *ngFor="let restaurant of restaurants$ | async">{{restaurant.restaurantName}}</li>

Another option is to let the component handle the observable by using a public variable. Then you set that variable when the observable respons. By this method you can do <li *ngFor="let restaurant of restaurants">{{restaurant.restaurantName}}</li>

answered Apr 2, 2019 at 8:12

Jonas Praem

2,4745 gold badges37 silver badges62 bronze badges

3 Comments

user3980196 Over a year ago

when i use async i get the following error: ERROR Error: "InvalidPipeArgument: '[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'". on letting the component handle the observable, there seems to be no delay.

Jonas Praem Over a year ago

sorry. Normally the $ suffix indicates an observable. I thought restaurants$ was a reference to an observable of a behaviourSubject. Does your viewAll method return that observable? your component seems fine.

user3980196 Over a year ago

actually http method in viewall() is supposed to return an observable (of an array). the api returns a json object. i'm a bit confused as well.

Collectives™ on Stack Overflow

angular code not displaying data asynchronously

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related