映射JSON对象以在模板上显示数据[ANGULAR 4]

Question

我准备显示来自服务器的JSON数据。我现在还在学习角度，我现在知道的是我应该将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
}
]

我的投资.component.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;
}

/*
http://360.actumlab.com/web/api/investments?user_iduser 
https://api.github.com/users/seeschweiler
*/

我的investments.component.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>

Answer 1

请在下面找到，你必须使用ngFor来显示JSON响应，

样本响应在资产中保存为test.json

{
 "statuscode": 200,
 "data": 
  [
    { "idinvestment": 6, "title": "Gdańsk Wrzeszcz, Jaśkowa Dolina 72"
    },
    {"idinvestment": 13, "title": "Kamienica Malczewskiego"
    },
    {"idinvestment": 18,"title": "Biuro"
    },
    {"idinvestment": 19,"title": "fdfdf"
    }
  ]
}

示例代码

HTML

<div *ngFor="let res of resu">
   <p>{{res.idinvestment}}</p>
   <p>Title : {{res.title}}</p>
</div>

TS

resu:any;
this.http.get("assets/test.json")
  .map(res => res.json())
  .subscribe(res => {
   this.resu = res.data;
})

Answer 2

将您的代码更改为：

组件方面：

this.http.get<UserResponse[]>('http://360.actumlab.com/web/api/investments?user_iduser ').subscribe(data => {
    this.investments = data;
});

模板面：

<div class="row">
    <div class="col-sm-3" *ngFor="let investment of investments">
    <div class="polaroid">
        <img src="{{investment.photo}}" class="img-responsive">
        <div class="caption">
            <div class="row">
            <h3 style="font-weight: 600;"> {{ investment.title }} </h3>
            <h3 class="title-polaroid">{{ investment.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>

我希望通过查看代码更改你会得到这个想法，仍然可以随意询问任何查询。