角度错误：找不到“object”类型的不同支持对象“[object Object]”答案

【问题标题】：Angular Error: Cannot find a differ supporting object '[object Object]' of type 'object'角度错误：找不到“object”类型的不同支持对象“[object Object]”
【发布时间】：2018-01-07 07:22:34
【问题描述】：

我有一个服务，它使用 GET 请求从 rest 调用（firebase）获取 json 数据。我正在尝试在 middle-box.component.html 上显示响应数据

修复此错误的任何建议或解决方案：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

twitter.service.ts

@Injectable()
export class TwitterService {
  constructor(private http: Http) {}
  getJobs() {
    var jobs = {}
    console.log('Twitter Service Called !');
    return this.http.get('https://dmm-db.firebaseio.com/jobs.json')
    .map(
        (response: Response) => {
          var data = response.json();
          var jobs = [], item;

          for (var type in data) {
            console.log(type);
              item = {};
              item.name = type;
              jobs.push(item);
          }
          console.log(jobs);
          return jobs;
        }

      )
  }
}

middle-box.component.ts

@Component({
    selector: 'app-middle-box',
    templateUrl: './middle-box.component.html',
    styleUrls: ['./middle-box.component.css']
})

export class MiddleBoxComponent implements OnInit {

  constructor(private twitterService: TwitterService) {
    twitterService.getJobs()
      .subscribe(
        (jobs: any[]) => this.jobs = jobs,
        (error) => console.log('Error: '+ error),
        () => console.log('Completed')
      );
  }

middle-box.component.html

<ul class="list-group" *ngFor="let job of jobs">
  <li class="list-group-item">{{ job.name }}</li>
</ul>

【问题讨论】：

顺便说一句，我已经阅读了其他解决方案并尝试了一些东西，但都没有奏效。而且我是角度的新手，所以如果我在这里缺少基本构造，请原谅我。但我确实需要帮助，谢谢:)

标签： angular

【解决方案1】：

试试这些

export class MiddleBoxComponent implements OnInit {

  private jobs: any[];
  private isLoading: boolean = false;

  constructor(private twitterService: TwitterService) { }

  ngOnInit() {
    this.isLoading = true;
    this.twitterService.getJobs()
      .subscribe((jobs: any[]) => {
          this.jobs = jobs,
          this.isLoading = false;
      },
        (error: any[]) => console.log('Error: ' + error),
        () => console.log('Completed')
      );
  }

使用 ngOnInit() 来调用您的 API 而不是构造函数。这是一个很好的做法。

  <ul class="list-group" *ngIf="!isLoading" *ngFor="let job of jobs" >
  <li class="list-group-item" > {{ job.name }}</li>
    < /ul>

【讨论】：

【解决方案2】：

jobs，不是在你的组件中定义的，而是在你的 twitter 服务中定义的。

您需要 twitterservice 从 middle-box.component.ts 访问作业，以便在您的 html 中使用它。

因此您可以将其分配给本地作业，或使用 twitterservice.jobs.name

【讨论】：

【解决方案3】：

这是来自新手的答案，因此请谨慎对待。我也遇到了这个问题，但是当我使用异步方法并且没有为订阅而烦恼时，问题就消失了。

@Component({
    selector: 'app-middle-box',
    templateUrl: './middle-box.component.html',
    styleUrls: ['./middle-box.component.css']
})

export class MiddleBoxComponent implements OnInit {
  public jobs; 

  constructor(private twitterService: TwitterService) {
    this.jobs = twitterService.getJobs();
  }

<ul class="list-group" *ngFor="let job of jobs | async">
  <li class="list-group-item">{{ job.name }}</li>
</ul>

注意：在 Angular 5 中，您不再在 observable 中的响应上调用 .json（无 var data = response.json()）。

【讨论】：