отображение ошибки в объекте массива * ngfor json

при извлечении объекта массива json из rest api и попытке отображения в ngfor произошел сбой по причине

ошибка

ИСКЛЮЧЕНИЕ: Невозможно найти другой поддерживающий объект "[объект объекта]" типа "объект". NgFor поддерживает привязку только к Iterables, таким как Arrays. в [указатели в HomeComponent @ 5: 37]

Код

import {Component} from 'angular2/core';
import {HomeService} from './home.services';
import {Index} from './index';

@Component({
    selector: 'home-app',
    providers: [HomeService],

    template: `
        <section class="left_side">
            <article>
                <div class="div_home">
                    <div class="div_homeIndxPartition">
                        <div class="div_IndxPartition" *ngFor="#indObj of indexes">
                            <table width="500px" class="idx_cons_table_det">
                                <tr>
                                    <th align="center" color="#A9F5F2"><h3>{{indObj.name}} ({{indObj.tracker}})</h3></th>
                                    <th align="center">Value</th>
                                    <th align="center">Change</th>
                                    <th align="center">%</th>
                                </tr>
                                <tr>
                                    <td align="center" colspan="1"></td>
                                    <td align="center">{{indObj.value}}</td>
                                    <td align="center">{{indObj.change}}</td>
                                    <td align="center">{{indObj.percent}}%</td>
                                </tr>
                            </table>
                            <br/>
                            <table width="500px" class="idx_cons_table">
                                <tr>
                                    <th align="center">High</th>
                                    <th align="center">Low</th>
                                    <th align="center">Open</th>
                                    <th align="center">Close</th>
                                    <th align="center">52 Week High</th>
                                    <th align="center">52 Week Low</th>                             
                                </tr>
                                <tr>
                                    <td align="center">{{indObj.high}}</td>
                                    <td align="center">{{indObj.low}}</td>
                                    <td align="center">{{indObj.open}}%</td>
                                    <td align="center">{{indObj.close}}</td>
                                    <td align="center">{{indObj.yearHigh}}</td>
                                    <td align="center">{{indObj.yearLow}}%</td>
                                </tr>
                            </table>                        
                        </div>                      
                    </div>
                </div>
            </article>
        </section>
    `

})
export class HomeComponent {
    public indexes:Array<Index>=[];
    public error;

constructor(private _service: HomeService){
    this.indexes = _service.getIndexes().subscribe(
            data => this.indexes =  JSON.parse(data),
            error => alert(" Error is : " + error),
            ()=> console.log("finished")
         );
    console.log(this.indexes);
}
}

Данные JSON

[
  {
    "id": 1,
    "name": "FTSE 100",
    "ticker": "UKX",
    "value": 69875.23,
    "change": 100,
    "percent": 2.3,
    "high": 69875.23,
    "low": 69700.89,
    "yearHigh": 699999.23,
    "yearLow": 680005.23,
    "open": 69600.54,
    "close": 699000.97,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 2,
    "name": "FTSE 250",
    "ticker": "MCX",
    "value": 465820.85,
    "change": 100,
    "percent": 2.3,
    "high": 465880.12,
    "low": 465810.74,
    "yearHigh": 478990.34,
    "yearLow": 465320.23,
    "open": 69600.54,
    "close": 699000.97,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 3,
    "name": "FTSE All-Share",
    "ticker": "ASX",
    "value": 236549.23,
    "change": 100,
    "percent": 2.3,
    "high": 236949.23,
    "low": 236149,
    "yearHigh": 246949.21,
    "yearLow": 235549.29,
    "open": 236519.23,
    "close": 236649.23,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 4,
    "name": "Euro Stoxx 50",
    "ticker": "STOXX50E",
    "value": 123469.87,
    "change": 100,
    "percent": 2.3,
    "high": 123499.87,
    "low": 123439.87,
    "yearHigh": 123499.87,
    "yearLow": 123169.87,
    "open": 123465.87,
    "close": 123459.87,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 5,
    "name": "S&P 500 ",
    "ticker": "S500",
    "value": 358976.36,
    "change": 100,
    "percent": 2.3,
    "high": 358986.36,
    "low": 358946.36,
    "yearHigh": 359976.36,
    "yearLow": 357976.36,
    "open": 358970.36,
    "close": 358996.36,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 6,
    "name": "Dow Jones I.A.",
    "ticker": "INDU",
    "value": 456789.36,
    "change": 100,
    "percent": 2.3,
    "high": 456799.36,
    "low": 456779.36,
    "yearHigh": 456889.36,
    "yearLow": 456689.36,
    "open": 456729.36,
    "close": 456779.36,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 7,
    "name": "GOLD",
    "ticker": "",
    "value": 500,
    "change": 100,
    "percent": 2.3,
    "high": 700,
    "low": 300,
    "yearHigh": 1500,
    "yearLow": 350,
    "open": 450,
    "close": 470,
    "constituents": null,
    "runDate": "21/04/2015"
  },
  {
    "id": 8,
    "name": "Brent Crude",
    "ticker": "",
    "value": 112,
    "change": 100,
    "percent": 2.3,
    "high": 115,
    "low": 107,
    "yearHigh": 200,
    "yearLow": 72,
    "open": 110,
    "close": 115,
    "constituents": null,
    "runDate": "21/04/2015"
  }
]

json angular ngfor

Rafi 25.04.2016 источник

comment

Используйте data.json() вместо ручного анализа. - Dinistro 25.04.2016

Ответы (5)

arrow_upward
9
arrow_downward

Я думаю, что значение, которое вы установили в свойстве indexes, не является массивом, а объектом.

Я бы увидел для этого несколько причин:

Вы получаете ответ вместо полезной нагрузки от метода getIndexes. В этом случае вы можете использовать оператор map в этом методе:
```
getIndexes() {
  return this.http.get(...).map(res => res.json());
}
```
Полученная полезная нагрузка соответствует не массиву, а некоторым его свойствам. В этом случае вам необходимо установить это свойство в свойство indexes.

Если вы хотите перебирать свойства объекта, вам необходимо реализовать настраиваемый фильтр, подобный этому:

@Pipe({name: 'keyValues'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

и используйте это так:

<div class="div_IndxPartition" *ngFor="#indObj of indexes | keyValues">
  (...)
</div>

См. Этот вопрос:

Как отобразить объект json с помощью * ngFor

Thierry Templier 25.04.2016

comment

Спасибо за ответ. Я получаю массив json и думал, что он будет преобразован обратно в объект домена путем отражения? Я неправильно понимаю? - Rafi; 25.04.2016

comment

Использование response.json () анализирует полезную нагрузку текстового ответа как json. Соответствующий объект будет объектом ... - Thierry Templier; 25.04.2016

comment

Что такое данные? Как вы его получите? - Thierry Templier; 25.04.2016

comment

this.indexes = _service.getIndexes (). subscribe (data = ›this.indexes = JSON.parse (данные), error =› alert (Ошибка: + error), () = ›console.log (завершено)); data - это данные json с сервера, которые я опубликовал в последнем сеансе вопроса. - Rafi; 25.04.2016

comment

что я смущен, мы не можем отображать объект домена как массив в * NG, и json для объекта домена не будет выполняться путем отражения, если вы установите тип свойства, который вы назначаете. - Rafi; 25.04.2016

arrow_upward
1
arrow_downward

Вы должны попробовать это:

В формате html:

<div  *ngFor="let subsciption of subscriptions;">
                     <div class="col-md-6">
                        <h5 class="widget-title">{{subsciption.name}}</h5>
                    </div>
</div>

в файле .ts:

    export class SubscriptionComponent implements OnInit {
        private subscriptions: any =[]; 
        // private subscriptions: any ={};    // here dont use {}
    .
    .
    .
    .
    .

        getAllSubscriptions(queryString) {
            this._http.get(`${environment.base_url}/subscriptions` + queryString)
                .subscribe((response: Response) => {
                    this.subscriptions = response.json();
                },

                (error: Response) => {
                    console.log("Login error");
                });
        }
        this.getAllSubscriptions(query);

    }

Shubham Verma 04.05.2017

arrow_upward
0
arrow_downward

У меня была такая же проблема, и мое решение было без труб. Я не использовал переменную в шаблоне, который возвращает Observer, создавал промежуточную переменную и присваивал ей результат. Например, мы сохраним поток в this.sub, но результат будет сохранен в this.indexes при успешном обратном вызове и будет использовать эту переменную в шаблоне html.

@Component({
  template: `
<ul>
  <li *ngFor="let index of indexs">
    {{ index }}
  </li>
</ul>
`
})
export class HomeComponent {
  privat sub;
  public indexes:Array<Index>=[];
  public error;

  constructor(private _service: HomeService) {
    this.sub = this._service.getIndexes().subscribe(
        data => this.indexes =  JSON.parse(data),
        error => alert(" Error is : " + error),
        () => console.log("finished")
     );

  }
}

Vladyslav Babenko 16.10.2016

arrow_upward
0
arrow_downward

Вы не хотите использовать каналы при работе с Observables. Эта ошибка является очень общей, и лучший способ - добавить console.log () и посмотреть, где вы ошиблись, поскольку это может быть множество вещей.

Моя проблема заключалась в том, что мой массив находился внутри объекта, и я пытался перебрать объект. Другие проблемы могут включать отображение или файл ngFor. Мой вывод на консоль будет выглядеть примерно так:

this.indexes = _service.getIndexes()
         .subscribe(
            data => {
                this.indexes = JSON.parse(data);
                console.log(indexes);
            },
            error => alert(" Error is : " + error),
                ()=> console.log("finished")
         );
    console.log(this.indexes);

Итак, исправление, которое мне нужно, было примерно таким:

this.indexes = _service.getIndexes()
             .subscribe(
                data => {
                    this.myNewObject = JSON.parse(data);
                    this.indexes = this.myNewObject.indexes;
                },
                error => alert(" Error is : " + error),
                    ()=> console.log("finished")
             );
        console.log(this.indexes);

Это произошло потому, что массив был вложен в объект, поэтому я просто создал новый объект и получил доступ к массиву, получив его свойство.

Belfield 24.06.2017

arrow_upward
0
arrow_downward

Я вижу ваш ответ, и простой способ решить - просто установить тип объекта в массиве * ngFor следующим образом:

public indexes:Array<TYPE_OF_YOUR_DATA>=[];

David Mendez Guardado 19.06.2019

отображение ошибки в объекте массива * ngfor json

ошибка

Данные JSON

Ответы (5)

Похожие вопросы