это то, что я пытался ..

от вопрос уже есть ответ здесь:

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

Пытаюсь отобразить данные в шаблоне HTML от компонента к вызову службы, который вызывает и возвращает API, но я получаю эту ошибку

ОШИБКА Ошибка: не удается найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы.

HTML

<li *ngFor="let item of testing"> 
   <a [routerLink]="[item.url]" > 
    <span>{{item.name}}</span>
   </a>
</li>

Составная часть

testing: any;

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

Обслуживание:

getMenu()  {
    return this.http.post(this.menuUrl, JSON.stringify({
        "UserID": 61525,
        "AppID": 15,
        "NavAppID":null,
        "AppGroupID": 116,
        "SelectedCaseID": 0,
        "SelectedRoleID":0            
    }), httpOptions)
        .map((response: Response)=> {
            return response;
        })
}

Скриншот изображения данных

Обновить

Я вижу проблему с данными

"меню" имеетdata: и это то, что ЗДЕСЬ и НЕ работает.

рабочий из другого вызова API. Обратите внимание, что

данные: массив (16)

Как я могу исправить свои данные от объекта к массиву?

 Jota.Toledo05 дек. 2017 г., 00:21
 Scott Leary04 дек. 2017 г., 23:33
httpclient я использую
 Al-Mothafar04 дек. 2017 г., 23:27
Вы используете Http или HttpClient?
 Al-Mothafar05 дек. 2017 г., 09:43
Эти данные пришли из базы? потому что массивы Firebase возвращаются как объект, а не как массив, даже если они отображаются в консоли как массив.
 Scott Leary04 дек. 2017 г., 23:37
@ Jota.Toledo 1. Я проводил исследования, на самом деле я не смотрел, но я смотрел, я также делаю очень похожий вызов в моем сервисе, который работает нормально. 2. Я не ценю, что со мной плохо обращаются, так как я не могу найти свои старые учетные данные, где мои основные навыки не связаны с Интернетом ... У меня была SO-учетная запись с более чем 20 000 баллов.

Ответы на вопрос(3)

Решение Вопроса

*ngFor="let item of testing.data.Menu1Items", Я не верю, что вам нужна асинхронная труба для этого. Я бы тоже*ngIf который когда-либо div содержит*ngFor петля.

Вот так:

<div *ngIf="testing">
    <li *ngFor="let item of testing.data.Menu1Items"> 
       <a [routerLink]="[item.url]" > 
        <span>{{item.name}}</span>
       </a>
    </li>
</div>

Дайте мне знать, если это может помочь с тем, что вы пытаетесь достичь.

РЕДАКТИРОВАТЬ:

Поэтому я бы предложил по-разному форматировать ваши данные при возврате ответа вашему клиенту, вот как я отформатировал бы данные до их возвращения:

[
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu1Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu1Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu2Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu2Items'
  }
];

Затем, если вы хотите сгруппировать данные по полю, которое вы выберете, запустите массив с помощью этого метода, и он будет разбивать данные, сгруппированные в отдельные массивы:

transformArray(array: Array<any>, field) {
    if (array) {
      const groupedObj = array.reduce((prev, cur) => {
        if (!prev[cur[field]]) {
          prev[cur[field]] = [cur];
        } else {
          prev[cur[field]].push(cur);
        }
        return prev;
      }, {});
      return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
    }
    return [];
  }

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

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

Затем, чтобы пройти через это в вашей разметке, вот структура*ngFor:

<div *ngFor"let category of data">
  <div>{{ category.key }}</div>
  <div *ngFor="let item of category.value">
    {{ value.name }}
  </div>
</div>

Я надеюсь, что это может помочь, я думаю, что вашим первым шагом должно быть форматирование этого массива, прежде чем он будет возвращен клиенту в виде массива объектов, не сгруппированных по ключу, а затем манипулирование данными, как только оно попадет на ваш клиент.

 Scott Leary05 дек. 2017 г., 20:20
В настоящее время я делаю этоthis.menu1 = result["data"].Menu1Items
 Scott Leary05 дек. 2017 г., 17:22
тот, что с «menu» - тот, который мне нужен, другой - пример похожего (web api -> angular service - component - html), но данные - это данные: vs массив данных
 Nicholas Pesa05 дек. 2017 г., 17:11
Так каков фактический формат массива, который вы возвращаете из своего HTTP-запроса? Я вижу два разных формата выше.
 Scott Leary05 дек. 2017 г., 01:59
не работает, но я добавил новый снимок экрана, показывающий данные, которые работают для другого вызова, и данные, которые не работают. Возможно, мне нужно преобразование в массив?
 Nicholas Pesa05 дек. 2017 г., 19:33
Вы форматируете данные из своего API, используя эти индексы в качестве ключей, таких как «Menu1Items»? Если это так, вы должны вернуть эти данные с индексами в виде чисел вместо текста, а затем иметь другое поле внутри объекта в массиве с именем «type», которое имеет значение «Menu1Items». Если вы можете скопировать объявление, вставить возвращенный объект из HTTP-запроса, я могу правильно отформатировать его в качестве примера для вас.

Http сервис возвращаетResponse объект, вызовjson() на котором должны дать вам данные, возвращаемые бэкэндом.

+ Изменитьreturn response; вreturn response.json();

 Scott Leary04 дек. 2017 г., 23:38
TypeError: response.json is not a function
 Scott Leary05 дек. 2017 г., 00:06
плюс он взрывается / не работает (response.json) с httpClient
 Scott Leary05 дек. 2017 г., 01:58
Добавлен новый скриншот моих данных
 Al-Mothafar05 дек. 2017 г., 00:02
он используетHttpClient и он уже упоминал, что он использует Angular 5, так что я думаю, что нет необходимостиresponse.json() так как ответ по умолчанию будет json.
 Nishant Shreshth05 дек. 2017 г., 11:02
Оба API выглядят по-разному для меня. Один возвращает статус как успешный, а другой - как неудачный.

Это потому, что вы пытаетесь перебратьdata объект. Пытаться:

<li *ngFor="let item of testing.Menu1Items"> 
 Mateusz Witkowski04 дек. 2017 г., 23:56
Это потому чтоtesting не определено, прежде чем Observable от службы испускает что-либо. Для предотвращения этой ошибки вы можете использоватьasync труба или предохранитель от неопределенного обтеканияli элемент вng-container с участием*ngIf="testing".
 Scott Leary05 дек. 2017 г., 00:00
<li *ngFor="let item of testing | async"> это то, что я пытался ..
 Scott Leary04 дек. 2017 г., 23:59
Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
 Scott Leary04 дек. 2017 г., 23:33
TypeError: Cannot read property 'Menu1Items' of undefined
 Scott Leary04 дек. 2017 г., 23:57
| асинхронный? или обмотка помешает?

Ваш ответ на вопрос