angular4 - asynchronous data loading - async ngFor loop?

Question

I am currently trying to connect my FrontEnd with our Backend API. I am running into a problem, where I have to wait for the backend to react.

When I am deleting one of my tiers for example, it doesn't update immediately when I call the getTiers()-method, so Im using setTimeout(() => this.getTiers(), 500); to give the API a chance to respond and than get the updated respone for my frontend.

Without the setTimeout I have to reload the page, before seeing the changes, for example, after deleting one of the tiers.

Is there a better way, something that works asynchronously? I tried to use the async pipe in the ngFor loop (<div class="col-md-4" *ngFor="let tier of tiers | async ">), however that gave me the error down below:

My this.tiers Object looks like this:

Error:

core.es5.js:1290 ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (http://localhost:3000/vendor.bundle.js:86006:12) [angular]
    at AsyncPipe._selectStrategy (http://localhost:3000/vendor.bundle.js:86151:15) [angular]
    at AsyncPipe._subscribe (http://localhost:3000/vendor.bundle.js:86137:31) [angular]
    at AsyncPipe.transform (http://localhost:3000/vendor.bundle.js:86115:22) [angular]
    at Object.View_PackagesComponent_0.co [as updateDirectives] (ng:///PackagesModule/PackagesComponent.ngfactory.js:787:66) [angular]
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:3000/vendor.bundle.js:13333:21) [angular]
    at checkAndUpdateView (http://localhost:3000/vendor.bundle.js:12671:14) [angular]
    at callViewAction (http://localhost:3000/vendor.bundle.js:13034:21) [angular]
    at execComponentViewsAction (http://localhost:3000/vendor.bundle.js:12966:13) [angular]
    at checkAndUpdateView (http://localhost:3000/vendor.bundle.js:12677:5) [angular]
    at callWithDebugContext (http://localhost:3000/vendor.bundle.js:13733:42) [angular]
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:3000/vendor.bundle.js:13273:12) [angular]
    at ViewRef_.detectChanges (http://localhost:3000/vendor.bundle.js:10745:63) [angular]
    at RouterOutlet.activateWith (http://localhost:3000/vendor.bundle.js:93091:42) [angular]
    at ActivateRoutes.placeComponentIntoOutlet

nicowernli · Accepted Answer · 2017-06-16 12:19:12Z

2

I'll recommend you removing the tier from the frontend and then dealing with the backend. That will give your users a better experience as they don't have to wait for a response from the server.

deleteTier(tier) {
    this.tiers = this.tiers.filter(t => t.id != tier.id);
    this.tierService.deleteTier(tier.id)
      .subscribe(
        (tiers) => console.log('success' + tiers),
        (error) => console.log('Following error appeared: ' + error)
    );}

If you have an error in your backend you can always re add the deleted teir in the (error) => method of the subscription.

answered Jun 16, 2017 at 12:19

nicowernli

3,34826 silver badges39 bronze badges

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

4 Comments

junior_dn Over a year ago

Thanks, haven't thought that way

junior_dn Over a year ago

What is the best way, to not have the data reload everytime onInit? There should be a way to store the data, after having it loaded once right? As of now, the user has to wait everytime, before his tiers are loaded and displayed

developer033 Over a year ago

@nicowernli I think this: this.tiers = this.tiers.filter(t => t.id != tier.id); should go inside.subscribe(), otherwise the item will be removed from list even if the server return error(s).

nicowernli Over a year ago

Exactly, if there is an error you can always add the tier again. But better not making the user wait and removing the element instantly. Is a way better user experience and in most cases the server won't (shouldn't) fail

Collectives™ on Stack Overflow

angular4 - asynchronous data loading - async ngFor loop?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related