У меня есть файл JSON со списком объектов для продажи.Я пытаюсь использовать * NgFor для циклического перебора данных для создания списка.
Во-первых, я все еще любитель в разработке угловых приложений и приложений, поэтому есть вероятность, что у меня может быть неправильно истолкована документация и т. Д.
Я пробовал циклически проходить по разным путям
*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