Object update not reflected on HTML angular

Question

I am using following code:

TS:

import { Component, ElementRef, ViewChild, OnInit, Output, EventEmitter, ViewEncapsulation, Renderer, NgZone } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
import { RbiCuiService } from './rbiCui.service';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'rbiCuiLandingPage',
    templateUrl: '../NDT/rbiCuiLandingPage.html',
    styleUrls: ['../lib/css/landing.css']
})


export class RbiCuiLandingPageComponent implements OnInit {
    @ViewChild('globalRow') globalRow: ElementRef;
    showDasboardDetail: boolean;
    showbtn: boolean = true;
    rbiCuiInstallations = [];
    @ViewChild('documentSpinner') documentSpinner: ElementRef;
    test2 = "test from back";

    constructor(private zone: NgZone,
        private _location: Location,
        private _router: Router,
        private rbiCuiService: RbiCuiService,
        private renderer: Renderer) {
        this.rbiCuiInstallations = [];
    }

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

    getRbiCuiDashboardDetail() {
        //this.renderer.setElementStyle(this.documentSpinner.nativeElement, 'display', 'flex');
        var request: string = "/" + "F1";
        this.rbiCuiService.getDashboardCUIRBIData(request).subscribe(
            data => {
                this.zone.run(() => {
                this.rbiCuiInstallations = data;
                console.log(this.rbiCuiInstallations);
                //this.renderer.setElementStyle(this.documentSpinner.nativeElement, 'display', 'none');
                });
            },
            err => console.error(err),
            () => {
                this.rbiCuiInstallations = [];
               // this.renderer.setElementStyle(this.documentSpinner.nativeElement, 'display', 'none');
            }
        );
    }
}

HTML:

{{test2}}
{{rbiCuiInstallations.length}}

<div *ngFor="let attachment of rbiCuiInstallations;let i = index">
    <span>{{attachment.installationName}}</span>
</div>

I am always getting length 0 on front end for rbiCuiInstallations but test2 is showing result.

Please help me where I am going wrong.

Barremian · Accepted Answer · 2020-10-13 07:07:13Z

You're overwriting the variable this.rbiCuiInstallations with an empty array when the observable completes. You could remove it.

getRbiCuiDashboardDetail() {
  var request: string = "/" + "F1";
  this.rbiCuiService.getDashboardCUIRBIData(request).subscribe(
    data => { ... },
    err => console.error(err),
    () => {
      // no `this.rbiCuiInstallations = []` here
    }
  );
}

This is the order of execution of an HTTP call using Angular HttpClientModule.

Call this.rbiCuiService.getDashboardCUIRBIData(request).
Trigger next callback data=>{...} in case of a valid response.
Or trigger error callback err=>{...} in case of an error response.
Trigger complete callback ()=>{...}.

So the complete callback would be called regardless of a valid or an error response. And since you're assigning an empty array [] to the variable, it overwrites the value previously written in the next callback.

Collectives™ on Stack Overflow

Object update not reflected on HTML angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related