Ошибка при попытке сопоставить объект "объект". Разрешены только массивы и итерации NgFor

У меня есть файл JSON со списком выставленных на продажу объектов недвижимости. Я пытаюсь использовать * NgFor для перебора данных для создания списка.

Во-первых, я все еще любитель angular и разработки приложений, поэтому есть вероятность, что я неправильно истолковал документацию и т. Д.

Я пробовал проходить по разным путям

*NgFor="let post of posts.properties"
*NgFor="let post of posts.properties.property"

и по-прежнему получаю различные ошибки.

Насколько я понимаю, я должен преобразовать наблюдаемое в массив свойств. А затем привяжите его к html. (Что, как мне кажется, я сделал, поскольку свойства имеют тип array?

json

{
    "properties": {
        "property": [
            {
                "propertyID": "101552000007",
                "branchID": "1",
                "clientName": "A Demo",
                "branchName": "Brackley",
                "department": "Sales",
                "referenceNumber": "10006",
                "addressName": "",
                "addressNumber": "87",
                "addressStreet": "Hackney Road",

properties.interface.ts

export interface IProperties {
    addressStreet: string;
    addressNumber: number;
}

For-sale.service.ts

import { IProperties } from './../properties.interface';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';



@Injectable({
  providedIn: 'root'
})
export class ForSaleService {

  constructor(private http: HttpClient) {

  }


  getProperties(): Observable<IProperties[]> {
    return this.http.get<IProperties[]>('/assets/data/jupix.json');

  }

}

for-sale.page.ts

import { ForSaleService } from './for-sale.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-for-sale',
  templateUrl: './for-sale.page.html',
  styleUrls: ['./for-sale.page.scss'],
  providers: [ForSaleService]
})
export class ForSalePage implements OnInit {

  public properties = [];

  constructor(private saleService: ForSaleService) { }

  ngOnInit() {

    this.onGetProperties();

  }



  onGetProperties() {
    this.saleService.getProperties()
      .subscribe(response => {
        console.log(response);
        this.properties = response;
      });
  }
}

html

<ion-content>
  <ion-list *ngFor="let property of properties">
    <ion-card>

      <ion-card-header>{{ property.addressNumber }}</ion-card-header>
      <ion-card-content>
        <p>
          <ion-icon name="person" color="primary"></ion-icon>
        </p>
      </ion-card-content>
    </ion-card>
  </ion-list>
</ion-content>

Я не понимаю, пусть свойство свойств привязано к массиву свойств?

РЕДАКТИРОВАТЬ: Попробовав несколько предложений, в журнале консоли появляется закономерность, связанная с ошибками? Кажется, что дочерние элементы выглядят как неопределенные, поскольку именно они выдают ошибки?

Поэтому я полностью изменил переменную на propertiesList, чтобы ее было легче читать. Сейчас происходит действительно странная вещь. Итак, у нас есть *ngFor="let property of propertiesList.properties.property"

Затем для изображения карты <img src="{{ property.images.image[0].__text }}" alt=""> Это работает как задумано, как показано на изображении. Однако в журнале консоли Cannot read property '__text' of undefined и исходном " Cannot read property 'property' of undefined

Поэтому я продолжил добавлять другие элементы в html

<ion-card-header>{{ property.addressNumber }} {{ property.addressStreet }} {{ property.addressPostcode }}</ion-card-header>

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

<p>{{ property.propertyFeature1 }} {{ property.floorplans.floorplan._modified }}</p>

Я добавляю это, и Cannot read property '__text' of undefined исчезает! вместо этого заменяется на Cannot read property '__modified' of undefined вместе с исходным Cannot read property 'property' of undefined

В коде Visual Studio единственная ошибка, которую я получаю, - это Identifier 'properties' is not defined. 'Array' does not contain such a member


person Jonjo Jefferson    schedule 03.04.2019    source источник
comment
Пожалуйста, проверьте это *ngIf="properties.properties.property?.length > 0" перед циклом   -  person Sandy Sanap    schedule 04.04.2019


Ответы (3)


Из документации:

object является итеративным, если он определяет его итерационное поведение, например, какие значения перебираются в цикле for ... of конструкции. Некоторые встроенные типы, такие как Array или Map, имеют поведение итерации по умолчанию, в то время как другие типы (например, Object) нет.

Измените ngFor на следующее:

<ion-list *ngFor="let property of properties.property">

Тогда вы сможете выполнять итерацию, поскольку это массив.

person Peter Haddad    schedule 03.04.2019
comment
Привет, спасибо за быстрый ответ. Я попробовал это и получил ошибку свойства свойства ForSalePage Identifier «свойство» не определено. 'Array' не содержит такого memberAngular - person Jonjo Jefferson; 04.04.2019
comment
что response дает вам? - person Peter Haddad; 04.04.2019
comment
если console.log(response) дает вам json, которым вы поделились, выполните let property of properties.properties.property" - person Peter Haddad; 04.04.2019
comment
Аааааааааааааааааааааааааааааааааааааааааааа, успех console.log(response) отвечает json. Использование *ngFor="let property of properties.properties.property" <ion-card-header>{{ property.addressNumber }} {{ property.addressStreet }}</ion-card-header> Это работает и показывает ожидаемые результаты, однако по-прежнему возникает ошибка. Невозможно прочитать свойство "свойство" неопределенного значения. - person Jonjo Jefferson; 04.04.2019
comment
Невозможно прочитать свойство «свойство» неопределенного значения в журнале консоли (несколько раз). И в коде Visual Studio «свойства» идентификатора ошибки не определены. 'Array' не содержит такого члена в NgFor - person Jonjo Jefferson; 04.04.2019
comment
хорошо, измените свою переменную this.properties на this.responses и измените ngfor на это <ion-list *ngFor="let ds of responses.properties.property"> <ion-card-header>{{ ds .addressNumber }}</ion-card-header>, пожалуйста, отметьте ответ как правильный, если он вам помог, нажав на галочку рядом с ним, спасибо! - person Peter Haddad; 04.04.2019
comment
Разве this.respopnse не будет таким же, как this.properties? - person Jonjo Jefferson; 04.04.2019
comment
Вы пробовали? - person Peter Haddad; 04.04.2019
comment
Я добавил правку в свою операцию, так как еще несколько тестов выявили некоторые странные вещи. - person Jonjo Jefferson; 04.04.2019

Вы можете попробовать это

Перед циклом проверьте условие *ngIf="properties.properties.property?.length > 0", чтобы он проверил, является ли массив или объект пустым или нет.

 <ion-content *ngIf="properties.properties.property?.length > 0">
      <ion-list *ngFor="let property of properties.properties.property">
       <ion-card>

        <ion-card-header>{{ property.addressNumber }}</ion-card-header>
        <ion-card-content>
          <p>
           <ion-icon name="person" color="primary"></ion-icon>
          </p>
        </ion-card-content>
      </ion-card>
   </ion-list>
  </ion-content>

поэтому вы не получите никаких ошибок в консоли вроде Cannot read property 'property' of undefined

Надеюсь, это будет полезно.

person Sandy Sanap    schedule 04.04.2019

По моему мнению, вызов get не может правильно сопоставить ваши данные с вашими свойствами, определенными в вашем интерфейсе. Поскольку отображение неверно, это не будет правильный массив, который можно зациклить.

в зависимости от того, что вы предоставили со всеми переменными, вам нужно перебрать его через:

<ion-list *ngFor="let property of properties.properties.property">

properties в качестве массива результатов, затем свойства как свойство свойства json + как фактический массив с данными ... даже не знаю, будут ли эти два идентичных идентификатора работать

person jcuypers    schedule 03.04.2019
comment
Привет, некоторые предлагали это, и это работает так, как задумано? Я говорю намеренно? Как и сейчас, используя интерполяцию строк, данные зацикливаются, но в журнале консоли я получаю сообщение об ошибке " Cannot read property 'property' of undefined и в коде Visual Studio Identifier 'properties' is not defined. 'Array' does not contain such a member Это первый раз, когда я сделал это, но я не могу не чувствовать, что массив интерфейса не не работает как задумано? - person Jonjo Jefferson; 04.04.2019