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 

Answer 1

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.