Question

Json数据未显示。我正在做一个httpGet，一切似乎都很好。似乎数据已加载到我的数组中，并且其中包含3个对象。但是，没有任何内容显示在HTML，{{associateList}}中，或者当我执行＆＃34; console.log＆＃34;时。我必须把它管道到JSON {{associateList | JSON}}然后我得到了所有东西，当然它在一个chunck中。我似乎无法访问阵列中的单个对象，我似乎无法弄清楚要做什么。

这是我的GET服务：

getAssociatesData(){
    return this.http.get('http://Api/Associates').map(res =>res.json());

以下是我订阅的方式和其他内容：

associateList: associateData[];

this.GetDataServices.getAssociatesData().subscribe(
  associates =>{this.associateList= (associates)},
  error => this.serviceError=error,
      () => {
            this.formatAssociates();
            console.log('associates loaded');
            //this.isLoading.next(false)
          }
  );
formatAssociates(){
  let associateCount = this.associateList.length;
  console.log('number of associates: ' + associateCount);
  this.showAssociates = true;
}
interface associateData{
 id : number;
 firstName : string;
 lastName : string;
 middleName : string;
 fullName : string;
}

在HTML中：

<div *ngIf="showAssociates">
  <span *ngFor="let associate of associateList; let count=index">
    <div id={{count}} >
        associate# = {{count}}
        associateID = {{(associate | async).id}}
        First Name = {{associate.firstName}}
        Last Name = {{associate.lastName}}
        Middle Name = {{associate.middleName}}
        Full Name = {{associate.fullName}}
    </div>
 </span>
</div>

{{associateList | json}}

问题是我只在管道时才看到数据＆＃34; associateList＆＃34;到了json。我无法显示个别元素。

Answer 1

据我所知，您在this.showAssociates = true;的方法中有formatAssociates()，如果出现错误则会触发，因此在设置{{1}后将其移至成功的情况你会看到这些价值观。

你没有看到它们导致变量可能是未定义的或假的，所以为了快速尝试，删除if条件来证明我的理论。

希望它有所帮助。

Answer 2

您的控制台是否显示任何错误？我最近遇到了类似的问题，这是因为html渲染比异步调用更快。检查此链接

Unable to display object array of an object in Angular 2 template

Answer 3

您的问题是您需要在角度组件的init生命周期内执行此服务。

import {Component, OnInit} from '@angular/core';

//components stuff goes here

export class AssociateComponent implements OnInit {
  associateList: associateData[];
  constructor(getAssociateDataService: getAssociateDataService) {}

  ngOnInit(){
    this.GetDataServices.getAssociatesData().subscribe(
      associates =>{this.associateList= (associates)},
      error => this.serviceError=error,
      () => {
            this.formatAssociates();
            console.log('associates loaded');
            //this.isLoading.next(false)
          }
    );
  }
  formatAssociates(){
    let associateCount = this.associateList.length;
    console.log('number of associates: ' + associateCount);
    this.showAssociates = true;
  }
  interface associateData{
   id : number;
   firstName : string;
   lastName : string;
   middleName : string;
   fullName : string;
  }
}

angular 2 HTTP请求json数据不显示而不使用| JSON

3 个答案: