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

Question

我正准备显示来自 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
}
]

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

将代码更改为 :

组件端：

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>

我希望只要看看代码的变化，你就会明白，仍然可以随时提出任何问题。

Answer 2

请在下面找到，您必须使用 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;
})

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

Mapping JSON objects to display data on the template [ANGULAR 4]

mapping

json

object

display

angular