我正在准备显示从服务器获取的JSON数据。我仍在学习angular,我现在知道的是,我应该将JSON答案映射到对象,但我不知道具体怎么做。从现在起,我可以键入对象的ID并在模板上显示单个数据。我想使用ngFor指令显示JSON中的对象列表。
我的JSON:
[
{
"idinvestment": 6,
"title": "GdaÅsk Wrzeszcz, JaÅkowa Dolina 72",
"description": "Oferujemy 6 nieprzechodnich 1-osobowych i 2-osobowych pokoi w Åwieżo wyremontowanym mieszkaniu. Każdy pokój zamykany na klucz. \r\nMieszkanie znajduje siÄ przy JaÅkowej Dolinie, do Grunwaldzkiej jest bardzo blisko, zaledwie 600 metrów, a jednoczeÅnie dookoÅa sÄ
same parki i mnóstwo zieleni.\r\n\r\nPokoje majÄ
wysoki standard, nowe wyposażenie, zero PRL-u. Mieszkanie jest jasne, czyste. Do dyspozycji (czÄÅÄ wspólna) kuchnia i dwie peÅne Åazienki. Kuchnia jest w peÅni wyposażona - lodówka, mikrofalówka, kuchenka, czajnik elektryczny, naczynia, sztuÄce, garnki, przybory kuchenne. Na wyposażeniu również żelazko, deska do prasowania, odkurzacz, suszarki do ubraÅ, mop.",
"deadline": "2017-12-24",
"address": "ul. Gradowa 11/304, 80-802 GdaÅsk",
"phone": "608 581 600",
"photo": "http://360.actumlab.com/web/uploads/4_6_investment.jpg",
"city": "GdaÅsk",
"district": "Wrzeszcz Górny",
"tours_count": 0,
"arkit_count": 0,
"gallery_count": 6,
"3dmodel_count": 0
},
{
"idinvestment": 13,
"title": "Kamienica Malczewskiego",
"description": "",
"deadline": "0000-00-00",
"address": "",
"phone": "58 344 16 10",
"photo": "http://360.actumlab.com/web/uploads/1_13_investment.jpg",
"city": "GdaÅsk",
"district": "Wrzeszcz Górny",
"tours_count": 2,
"arkit_count": 0,
"gallery_count": 4,
"3dmodel_count": 0
},
{
"idinvestment": 18,
"title": "Biuro",
"description": "fdggdf",
"deadline": "2017-12-30",
"address": "bui",
"phone": "799300309",
"photo": "http://360.actumlab.com/web/uploads/3_14_investment.jpg",
"city": "GdaÅsk",
"district": "Orunia",
"tours_count": 1,
"arkit_count": 0,
"gallery_count": 0,
"3dmodel_count": 0
},
{
"idinvestment": 19,
"title": "fdfdf",
"description": "dfdfd",
"deadline": "2018-01-27",
"address": "dfd",
"phone": "dfdf",
"photo": "http://360.actumlab.com/web/uploads/8_19_investment.jpg",
"city": "GdaÅsk",
"district": "Orunia",
"tours_count": 0,
"arkit_count": 0,
"gallery_count": 0,
"3dmodel_count": 0
}
]
我的投资。组成部分ts
import { HttpClient } from '@angular/common/http';
import { InvestmentsService } from './../services/investments.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-investments',
templateUrl: './investments.component.html',
styleUrls: ['./investments.component.css']
})
export class InvestmentsComponent {
constructor(private http: HttpClient){
}
ngOnInit(): void {
this.http.get<UserResponse>('http://360.actumlab.com/web/api/investments?user_iduser ').subscribe(data => {
this.title = data["1"].title;
this.description = data["1"].description;
this.photo = data["1"].photo;
console.log(data);
});
}
investments = new InvestmentsService().investment;
photo;
title;
description;
}
interface UserResponse {
title: string;
description: string;
imgURL: string;
}
我的投资。成分。html
<div class="row">
<div class="col-sm-3" *ngFor="let investment of investments">
<div class="polaroid">
<img src="{{photo}}" class="img-responsive">
<div class="caption">
<div class="row">
<h3 style="font-weight: 600;"> {{ title }} </h3>
<h3 class="title-polaroid">{{ description }}</h3>
</div>
</div>
</div>
<div class="row row-buttons">
<a class="btn btn-primary btn-product" routerLink="/add-investment" routerLinkActive="active"><span class="glyphicon glyphicon-pencil"></span> Edytuj</a>
<a class="btn btn-primary btn-danger" routerLink="/add-investment" routerLinkActive="active"><span class="glyphicon glyphicon-trash"></span> Usun</a>
</div>
</div>
</div>