代码之家  ›  专栏  ›  技术社区  ›  Lebek

将JSON对象映射到模板上显示数据[角度4]

  •  0
  • Lebek  · 技术社区  · 7 年前

    我正在准备显示从服务器获取的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;
    }
    
    /*
    http://360.actumlab.com/web/api/investments?user_iduser 
    https://api.github.com/users/seeschweiler
    */
    

    我的投资。成分。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>
    
    2 回复  |  直到 7 年前
        1
  •  0
  •   arun    7 年前

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

    样本响应 作为测试保存在资源中。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;
    })
    
        2
  •  0
  •   Vivek Doshi    7 年前

    将代码更改为 :

    组件侧:

    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>
    

    我希望只要看看代码的变化,你就会明白这一点,仍然可以自由地提出任何疑问。