Angular 角度5数据绑定问题

我是angular 5中的一个noob，试图在API调用的结果中设置多个变量，但变量的更改并没有反映在视图中，即使在控制台上记录变量并在组件（ts文件或控制器）中显示其值

在以下代码中，对partnerPlanInfo varibale的更改会反映在视图中，但对servData1变量的更改不会反映在视图中

因此，请指导我在哪里遗漏了导致此问题的原因

    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）；将结果显示为

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

但servData1的价值并没有反映在视图中。当我像{{servData1}}一样打印它时，它将显示为，，。 当我试图在视图中使用

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

{{ser}}

然后它就出现了

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

故障排除 首先，您必须使用json管道找到json数据的结构

找到解决办法 找到结构后，可以找到要打印的键。在上一期中，您可以尝试这样打印：

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

{{serDetails.insertMode}

您的

servData1

数据结构似乎是这样的

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

这意味着您有一个带有映射的数组，映射中的每个条目都是一个带有映射的新数组。您需要一个双for循环来打印最内部的对象

试一试

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

{{serDetails | json}}

---

这将打印数据结构中最内部元素内的对象。添加一个json管道只是为了让打印效果更好。可能不需要它。

尝试以这种方式使用管道，但需要根据对象属性进行配置：

@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;
  }
}

您的代码是：

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

---

servData1中的对象值不是有效的JSON。

因此，它不能序列化为数组。

---

在发送此邮件之前，请删除服务器上的斜杠

@Nazeer感谢您的回复，但仍然会得到简单的

{{servData1 | json}}

？您能得到结果吗？它显示[]、[]、[]这意味着您的数据在模板中不可用。请从组件中删除不必要的

changeDetection

模块，然后再次测试或声明一个临时数组并在模板中显示。感谢您的回复，但如果您使用onPush策略，仍然会收到提示，您告诉angular此组件中不应存在更改检测。也许您也可以从组件中删除该属性。@Stavm我只是在stackoverflow上尝试了各种建议的方法。这就是为什么我添加了ChangeDetectionStrategy.OnPush，但它不起作用。删除ChangeDetectionStrategy.OnPush没有任何区别。评论提到了这样一个问题：伙计们，这个组件的主机组件是否也有自定义的更改检测？您是否在其中一个包含组件上有

this.ref.detach（）

或类似的组件？@Stavm No我没有任何此类组件。您是否可以尝试将

this.ref.reatach（）

添加到此组件的构造函数中？如果在html模板

{myString}中放置一个简单字符串，会发生什么情况

在您的组件中，您可以尝试在使用复杂数组时对其进行更改

myString='hello'

或诸如此类，它在DOM上会改变吗？是的，当我用简单字符串硬编码变量时，该值会显示在视图中。谢谢，现在我收到了一个复制粘贴问题，实际上没有反斜杠。

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

Object.keys(servData1);