Данные, возвращаемые из вызова API через сервис к компоненту, являются объектом и, похоже, должны быть массивом для Angular.

1

У меня есть данные для меня, которые работают отлично

рабочие данные

data: Array(16)

Данные, которые НЕ работают, похожи на

data: Menu1Items: Array(5) > 0 {.... } etc

Я использую Angular 5, и поэтому службы возвращают данные, подобные этому

  .map((response: Response) => {
            return response;

Затем компонент перехватывает его, и console.log отлично работает

this.arsSevice.getMenu()
        .subscribe(
            result => {
                this.testing = result; 
                console.log('menu',result);
            })

проблема с данными, этот скриншот показывает проблему, я просто не понимаю, как ее исправить с помощью объекта vs array?

ТОЛЬКО сообщение об ошибке из-за HTML TEMPLATE

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

Шаблон HTML

<li *ngFor="let item of testing">

Изображение, показывающее, что вызов, который похож в архитектуре с html-контуром шаблона, компонентом, службой, является рабочим BOTTOM, component замечает разные по сравнению с тем, что называется menu которым у меня возникают проблемы?

Изображение 174551

  • 0
    Как ваши данные могут измениться? Вы должны где-то его модифицировать, пожалуйста, предоставьте весь код, необходимый для воспроизведения проблемы, или, что еще лучше, создайте демонстрацию, демонстрирующую проблему.
  • 0
    Он, кажется, показывает пример (я думаю) 1, который работает (другой вызов, который я предполагаю) к тому, который не работает - Конечно, не очень хорошо объяснил, но я наткнулся на это, и выбранный ответ мне помог.
Теги:
angular
arrays
observable

2 ответа

2
Лучший ответ

Я думаю, вам нужно установить test = result.data и повторить это.

this.arsSevice.getMenu()
        .subscribe(
            result => {
                this.testing = result.data; 

            })

это даст вам доступ к массиву в 'data'

Я попытался изменить форму данных, и это сработало для меня. Надеюсь, это сработает для вас...

var data={
      menu1Items:[{key:"boo", key2:"hoo"}],
      menu2Items:[{key:"boo2", key2:"hoo2"}]
    }
    var tempData:any[]=[];
    for(var key in data){
      if(data.hasOwnProperty(key)){
        tempData.push(data[key]);
      }
    }
    this.data = tempData;
}

В вашем шаблоне:

<ul *ngFor="let menu of data ">
  <li>
      <ng-container *ngFor="let menuItem of menu">
          {{menuItem.key}} / {{ menuItem.key2}}       
      </ng-container>
  </li>
</ul>
Поделиться
  • 0
    Нет, я сделал это, не повезло. Данные отличаются, обратите внимание на скриншот. рабочий сервис / компонент содержит данные в массиве, но посмотрите на данные, которые я получаю в меню ...
  • 0
    Является ли GetMenu отличным от «рабочего массива» вызовом или он тот же? Почему один имеет статус «провал», а другой - успех? Пункты меню также являются массивами объектов, поэтому вам также нужно будет выполнить итерацию по каждому массиву меню. Вы пробовали с двумя петлями?
Показать ещё 3 комментария
0

С помощью HttpClient угловой автоматически анализирует ответ на объект. Он не знает, какой тип объекта есть, поэтому он просто нормальный объект, который не знает его свойства массива.

Это потому, что в то время как HttpClient проанализировал ответ JSON в Object, он не знает, какова форма этого объекта.

Но вы можете сказать, какой тип возвращаемого объекта является таким, чтобы он был правильно отображен. Например, если вы вернете массив строк, вы можете сделать что-то подобное.

return this.http.get<string[]>(apiUrl)

Вы можете прочитать больше здесь, они описывают подобную проблему, только с немного другой структурой.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню