-1

Eu estou tentando exibir uma lista usando ngFor mas está dando este erro: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Alguem pode me dizer o porque?

Json:

 {  
   result:{  
      _id:"5be5c978dec9a11c0cba3d45",
      date:"2018-11-16T02:00:00.000Z",
      dayOfWeek:"Friday",
      times:[  
         {  
            name:"a",
            hourInit:"06:00",
            _id:"5be5c978dec9a11c0cba3d54"
         },
         {  
            name:"b",
            hourInit:"07:00",
            _id:"5be5c978dec9a11c0cba3d53"
         },
         {  
            name:"c",
            hourInit:"08:00",
            _id:"5be5c978dec9a11c0cba3d52"
         }
      ]
   }
}

metodo list do Service:

  list() {
    return this.http.get<Programming[]>(this.API)
    .pipe(
      tap(console.log)
    )

  }
}

Componente:

export class ProgrammingListComponent implements OnInit {
  schedules: Programming[];
  schedules$:Observable<Programming>

  constructor(private service: ProgrammingService) {}

  ngOnInit() {
    this.schedules$ = this.service.list();
  }
}

model:

export interface Programming {
  _id: number;
  date:Date;
  dayOfWeek:string;
  times: [];
}
1
  • Cara Isa, o problema começa no ngfor, logo pode ser a forma do model como pode ser apenas um erro no ngfor, não tem como sabermos. Se quer exibir times: no NgFor até pode fazer algum sentido, mas tem que mostrar algo relacionado ao erro. NgFor é um funcionalidade do Angular e não do TypeScript, portanto é bem mais provel que o erro seja nela, ou a partir dela, mas para sabermos é preciso que mostre um exemplo Mínimo, Completo e Verificável, leia principalmente a parte que diz "Garanta que o exemplo realmente reproduza o problema!". 21/11/2018 às 5:22

1 Resposta 1

0

vc tem que mapear sua resposta pro array.

return this.http.get<any>(this.API) ou cria um model tipo ProgrammingResponse
    .pipe(
      map(response=>response.result.times)
      tap(console.log)
    )

Edit se seu objetivo é usar o async pipe vc pode fazer assim:

<div *ngIf="(schedules$ | async) as schedules">
<div *ngFor="let time of schedules.times">{{time}}<div>
</div>
4
  • obrigada pela resposta. mas pelo que entendi fazendo esse código eu teria apenas "times" mas eu preciso dos dados acima dele tbm, como "_id", "date", "dayOfWeek", etc. Não apenas do times. Pode me ajudar?
    – Isa
    21/11/2018 às 1:43
  • 1
    isa o erro e o seguinte ta falando que vc está tentando percorrer um object, e isso não pode, você tem que transforma isso em um array para poder percorre, vc tem 2 opções mas usando o código do eduardo, response=> [response] ou response=> this.id = response.result._id; this.date = response.result.date; this.times.response.result.times
    – Willian
    21/11/2018 às 12:23
  • @Willian segui sua dica, funcionou e não precisei perder a tipagem :)
    – Isa
    21/11/2018 às 20:52
  • 1
    voce tbm poderia salvar do jeito que veio do seu backend this.data = response, e percorrer apenas la no html data.times no for, ler os dados times._id, e se não rodar pode por async no objeto no html data?.times data?._id, o ? coloca async no objecto no html
    – Willian
    21/11/2018 às 23:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .