в угловых 6 = ОШИБКА: Ошибка при попытке diff '[объект объекта]'.Разрешены только массивы и итерации - PullRequest
0 голосов
/ 20 сентября 2018

Пожалуйста, помогите мне решить эту ошибку

ProfileComponent.html:4 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.push../node_modules/@angular/core/fesm5/core.js.DefaultIterableDiffer.diff (core.js:5642)
    at [enter image description here][1]NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3156)
    at checkAndUpdateDirectiveInline (core.js:9246)
    at checkAndUpdateNodeInline (core.js:10507)
    at checkAndUpdateNode (core.js:10469)
    at debugCheckAndUpdateNode (core.js:11102)
    at debugCheckDirectivesFn (core.js:11062)
    at Object.eval [as updateDirectives] (ProfileComponent.html:4)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)

Ниже приведены мои файлы

PRofile.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Iprofile } from './profile';
import {Observable} from 'rxjs/';

@Injectable({
  providedIn: 'root'
})
export class ProfileService {
  private _url:string='https://jsonplaceholder.typicode.com/todos/1';

  constructor(private http:HttpClient) { 
  }
    getProfile():Observable<Iprofile[]>{
      return this.http.get<Iprofile[]>(this._url)

    }

}

Профиль component.ts

import { Component, OnInit,Input } from '@angular/core';
import {ProfileService} from '../profile.service'
@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
@Input()
export class ProfileComponent implements OnInit {

  public profiles=[];
  constructor(public profservice:ProfileService) { }

  ngOnInit() {
   this.profservice.getProfile()
    .subscribe(data => this.profiles =data);
  }
}

profile.component.html

 <p>
      profile works!
    </p>
    <ul *ngFor="let profile of profiles">
        <li>{{profile.id}}</li>
      </ul>

profile.ts

export class Iprofile{
    userId: number;
    id: number;
    title: string;
    completed : boolean
  }

1 Ответ

0 голосов
/ 20 сентября 2018

На самом деле используемый вами URL возвращает только один объект:

См. Здесь: https://jsonplaceholder.typicode.com/todos/1

Вы передаете параметр URI, который является идентификатором первого объекта.Вам нужно изменить его на:

https://jsonplaceholder.typicode.com/todos

В вашем случае измените с:

private _url: string = 'https://jsonplaceholder.typicode.com/todos/1';

на:

private _url: string = 'https://jsonplaceholder.typicode.com/todos';

Потому что ngForпринимаются только массивы, а не объекты, и вы передаете объект, поэтому вы получаете сообщение об ошибке:

Допускаются только массивы и итерации

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...