Angular 5 Data binding issue

Question

I am a noob in angular 5 trying to set multiple variable in result of API call but changes to the variable are not reflecting in view eventhough logging the variable on console displays its value in component(ts file or controller).

In the following code changes to partnerPlanInfo varibale are getting reflected in the view but changes to servData1 variable are not reflecting in the view.

So please guide me where I am missing something which is causing this issue.

    import { Component, OnInit, ViewEncapsulation } from '@angular/core';
    import { MerchantService } from '../merchant.service';
    import {Observable} from 'rxjs/Rx';
    import { HttpClient, HttpParams } from '@angular/common/http';
    import { Plan } from '../models/Plan';
    import {ChangeDetectorRef} from '@angular/core';
    import { ChangeDetectionStrategy } from '@angular/core';

    @Component({
     selector: 'app-dashboard',
     templateUrl: './dashboard.component.html',
     styleUrls: [
    './dashboard.component.scss',
    './merchantAdd.scss',
    './intlTelInput.scss',
    './checkbox.scss',
    './merchant_type.scss',
    './redeemlocation.scss',

    ],
    encapsulation: ViewEncapsulation.None,
    providers:[MerchantService, HttpClient] ,
    changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class DashboardComponent implements OnInit {
    public merchants;
    public partnerPlanInfo;
    public customPlan;
    public planServices: any[]  = new Array();
    public planInfo: any;
    public planService: any;
    public serviceData:any[] = new Array();
    public planInfoArray: any[] = new Array();
    public servData: any;
    public servData1: any[]=  new Array();


    constructor(private _merchantServices: MerchantService,private   
    ref:ChangeDetectorRef) {

     }

  ngOnInit() {

   this.getPartnerPlan();
   //let timer = Observable.timer(2000, 5000);
  // timer.subscribe(() => this.getPartnerPlan());
  }

  getPartnerPlan()
  {
    let partnerPlanRequestData  = new HttpParams().set('partnerId','prtnr000000000000001').set('planType','0');



    this._merchantServices.getPlan(partnerPlanRequestData).subscribe( // the first argument is a function which runs on success
      parnerPlan => { this.partnerPlanInfo = parnerPlan;


       this.servData1= this.generateServiceData(parnerPlan);

        console.log(this.servData1);

        this.ref.detectChanges();
      },
      // the second argument is a function which runs on error
      err => console.error(err),
      // the third argument is a function which runs on completion
      () => console.log('done loading partner plan'+this.partnerPlanInfo)
    );
    //console.log(this.planServices);


  }


  generateServiceData(parnerPlan)
  {
    let count=0;
    for (this.planInfo of parnerPlan){
      var planArray:any[] = new Array();
      planArray[this.planInfo.id] = this.planInfo.planServicesDetail;
      console.log(planArray);
      this.serviceData[count]=planArray;
      count++;
          }
    return this.serviceData;

        }

      }

console.log(this.servData1); displays the result as

[planm000000000000016: [0: {insertMode: false, flags: "0000000000", createdOn: "2018-02-23T07:19:23", updatedOn: "2018-02-23T07:19:23", createdBy: "admin"}]]

but value of servData1 is not getting reflected in view. When I print it like {{ servData1 }} then it is getting displayed as ,,. When I am trying to loop over servData1 in view using

<div *ngFor="let ser of servData1">
  <p>{{ ser }}</p>
</div>

Then it is showing

<!--bindings={
  "ng-reflect-ng-for-of": ",,"
}-->

Answer 1

Troubleshoot the issue

First of all you have to find the structure of the json data by using json pipe

{{myJsonData|json}}

Find solution

After finding the structure you can find the keys to print. In the above issue you can try to print like this :

<div *ngFor="let ser of servData1">
  <div *ngFor="let serDetails of ser">{{serDetails.insertMode }}</div>
</div>

Answer 2

It seems that your datastructure for servData1 is like this

[id:
  [0:{},
   1:{},
   n:{}
  ]
]

which means you have an array with map, and each entry in the map is a new array with a map. You need a double for-loop to print your inner most objects.

Try with

<div *ngFor="let ser of servData1">
  <div *ngFor="let serDetails of ser"></div>
{{serDetails | json}} 
</div>

This will print the object inside the inner most element in your datastructure. Added a json pipe just to make the print pretty. It is probably not needed.

Answer 3

Try to use pipe like this way but need to configure according to your object property:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

and your code is:

<div *ngFor="let ser of servData1 | keys">
  <div *ngFor="let serDetails of ser">{{serDetails.insertMode }}</div>
</div>

or convert your json to key object in componet

Object.keys(servData1);

Answer 4

your object values in servData1 is not a valid JSON.

and as such it can not be serialized to an array. remove the slashes on the server prior to sending this