Почему я получаю эту ошибку с Angular: «Не удается найти другой объект поддержки [[Object Object] '...»? »? - PullRequest
Новая
       2

Почему я получаю эту ошибку с Angular: «Не удается найти другой объект поддержки [[Object Object] '...»? »?

0 голосов
/ 28 апреля 2020

У меня есть это сообщение об ошибке в браузере: 

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

Я знаю, что есть много похожих вопросов, но ни один из них не помог. Я использую Angular с бэкэндом Nest JS.

Файл моей службы: 

export class ApiService {
  url: string = "http://localhost:3000/api/user";

  constructor(private http: HttpClient) {}

  ///GET API
  getApi(): Observable<Api[]> {
    const url = `${this.url}`;
    return this.http.get<Api[]>(url, httpOptions);
  }
}

Компонент: 

export class UsersComponent implements OnInit {
  api: Api[];

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getApi().subscribe(
      (user) => {
        this.api = user;
        console.log(this.api);
      },
      (err) => {
        console.log(err);
      }
    );
  }
}

1 Ответ

0 голосов
/ 28 апреля 2020

Это из-за этой строки: 

this.apiService.getApi().subscribe(
      (user) => {
        this.api = user; // <-- this isn't an array
        console.log(this.api);
      },
      (err) => {
        console.log(err);
      }
    );

Возвращение вашего this.apiService.getApi возвращает один объект, а не массив. *ngFor не примет это.

Самый быстрый способ исправить это - просто обернуть его, но я уверен, что ваша конечная цель не в этом: 

this.apiService.getApi().subscribe(
      (user) => {
        this.api = [ user ]; // wrap it in an array
        console.log(this.api);
      },
      (err) => {
        console.log(err);
      }
    );

Вы уверены, что хотите перебрать объект, или, возможно, конечная точка вашего узла не возвращает правильные результаты? Вы пытаетесь использовать *ngFor для перебора свойств в объекте user?

Может быть полезно опубликовать код вашего узла, если ваша конечная точка не возвращает то, что вы ожидаете (так как в конечном счете, именно здесь начинается проблема)

Помните, просто потому, что вы говорите TypeScript , что типа что-то, не означает, что это на самом деле будет этот тип во время выполнения

...