Question

我有一个JSON文件，其中包含待售属性列表。我正在尝试使用* NgFor遍历数据以创建列表。

首先，我仍然是从事角度和应用程序开发的业余爱好者，所以我可能会误解文档等内容

我尝试通过不同的路径循环

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

并且仍然出现各种错误。

我的理解是，我必须将可观察对象转换为一组属性。然后将其绑定到html。（我相信我已经做过，因为属性属于数组类型？

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

Answer 1

您可以尝试

在循环之前检查*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

我希望这会有用。

Answer 2

来自docs：

如果object定义了它的迭代行为，例如在for ... of构造中循环了哪些值，则它是可迭代的。某些内置类型（例如Array或Map）具有默认的迭代行为，而其他类型（例如Object）则没有默认行为。

将ngFor更改为以下内容：

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

然后，由于它是一个数组，因此您可以进行迭代。

Answer 3

根据我的说法，get调用无法正确地将数据映射到接口中定义的属性。由于映射不正确，因此不会成为可以循环的正确数组。

根据您提供的所有变量的内容，您需要通过以下方法对其进行循环：

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

将

properties作为结果数组，然后将属性作为json +属性的属性，作为具有数据的实际数组... 甚至不知道这两个相同的标识符是否可以正常工作

尝试区分“对象对象”时出错。 NgFor只允许数组和可迭代

3 个答案: