Невозможно найти отличающийся поддерживающий объект "объект объекта" типа "объект". NgFor поддерживает только привязку к Iterables, например массивы

Ответ 1

Там вам не нужно использовать this.requests= при вызове get (тогда requests будет иметь наблюдаемую подписку). Вы получите ответ в наблюдаемом success, поэтому значение requests в успехе имеет смысл (который вы уже делаете).

this._http.getRequest().subscribe(res=>this.requests=res);

Ответ 2

Удалите this.requests из

ngOnInit(){
  this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
}

к

ngOnInit(){
  this._http.getRequest().subscribe(res=>this.requests=res);
}

this._http.getRequest() возвращает подписку, а не значение ответа. Значение ответа назначается обратным вызовом, переданным в subscribe(...)

Ответ 3

В вашем файле JSOn сделайте следующее изменение.

 {
    "data":
    [
      {
        "id": 1,
        "name": "Safa",
        "email": "[email protected]",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      },
      {
        "id": 2,
        "name": "Safa",
        "email": "[email protected]",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      },
      {
        "id": 3,
        "name": "Salman",
        "email": "[email protected]",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      }
    ]
    }

И после этого:

 this.http.get(url).map(res:Response) => res.json().data);

Данные на самом деле являются именем коллекции tge json файла. Пожалуйста, попробуйте код выше, я уверен, что он будет работать.

Ответ 4

Вы можете объявить книги (в строке 2) в виде массива:

  title: any = 'List of books are represted in the bookstore';
  books: any = []; 
  constructor(private service:  AppService){
  }

  ngOnInit(){
    this.getBookDetails();
  }

  getBookDetails() {
    this.service.getBooks().subscribe(books => {
      this.books = books.json();
      console.log(this.books);
    });
  }

Ответ 5

У меня была такая же ошибка, потому что я сопоставил HTTP-ответ следующим образом:

this.http.get(url).map(res => res.json);

Обратите внимание, как я случайно вызвал .json как переменную, а не как метод.

Изменение его на:

this.http.get(url).map(res => res.json());

сделал трюк.

Ответ 6

Мое решение - создать Pipe для возврата массива значений или объекта propierties

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {

  // El parametro object representa, los valores de las propiedades o indice
  transform(objects : any = []) {
    return Object.values(objects);
  }
}

Шаблон Внедрить

<button ion-item *ngFor="let element of element_list | valueArray" >
    {{ element.any_property }}
</button> 

Ответ 7

у меня та же проблема. Так я решил проблему. Во-первых, когда происходит ошибка, мой массив данных поступает из БД, как это -,

{brands: Array(5), _id: "5ae9455f7f7af749cb2d3740"} 

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

(5) [{…}, {…}, {…}, {…}, {…}]

это решило мою проблему.

Ответ 8

Я столкнулся с такой же проблемой

мой начальный json

{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}

Я изменил свой json внутри []

[{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}]

Ответ 9

Для перебора объекта, который имеет формат json, как показано ниже

{
  "mango": { "color": "orange", "taste": "sweet" }
  "lemon": { "color": "yellow", "taste": "sour" }
}

1. Присвойте это переменной

   let rawData = { "mang":{...}, "lemon": {...} }

2. Создать пустой массив для хранения значений (или ключей)

   let dataValues = [];//For values

   let dataKeys = [];//For keys

3. Зацикливайтесь на ключах и добавляйте значения (и ключи) в переменные

   for(let key in rawData) {//Pay attention to the 'in' dataValues.push(rawData[key]); dataKeys.push(key); }

4. Теперь у вас есть массив ключей и значений, которые вы можете использовать в * ngFor или в цикле for

   for(let d of dataValues) { console.log("Data Values",d); }

   <tr *ngFor='let data of dataValues'>..... </tr>

Ответ 10

Вы должны использовать асинхронную трубу. Док: https://angular.io/api/common/AsyncPipe

Например:

<li *ngFor="let a of authorizationTypes | async"[value]="a.id">
     {{ a.name }}
</li>

Ответ 11

this.requests=res здесь вы пытаетесь назначить следующий ответ на объект,

{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK",
"url":"xyz","ok":true,"type":4,"body":[{}]}

Поскольку формат объекта отличается от формата ответа, вам необходимо назначить часть res.body из своего ответа, чтобы получить необходимое содержимое.

Ответ 12

<ul>
<li *ngFor = "let Data of allDataFromAws  | async">
  <pre> {{ Data | json}}</pre>
</li>
</ul>

используйте async для преобразования allDataFromAws в объект Array....

Ответ 13

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

Ответ 14

Просто объявите переменную как массив, в котором вы храните данные, у меня это сработало.

listingdata:Array<any> = [];
this.listingdata = data.results.rows;

и зациклить данные о листинге на HTML-странице

Ответ 15

Если вы столкнулись с этой проблемой через Google, проверьте, правильно ли указан элемент host директивы *ngFor. Под этим я подразумеваю, что столкнулся с этой ошибкой и потратил много времени на изучение исправлений, прежде чем понял, что поместил *ngFor в элемент ng-template вместо моего компонента, который я хотел повторить.

Неправильное

<ng-template *ngFor=let group of groups$ | async" ...>
  <my-component [prop1]="group.key" ... </my-component>
<\ng-template>

Правильный

<my-component *ngFor=let group of groups$ | async" [prop1]="group.key" ... </my-component>

Я знаю, что это явная ошибка задним числом, но я надеюсь, что ответ здесь спасет кого-то от головной боли, которая у меня сейчас есть.

Ответ 16

requests = [];


this.requests[0] =this._http.getRequest().subscribe(res=>this.requests=res);

а также

*ngFor="let product of requests[0]"