时间戳

首页 > 解决方案 > 从 Angular 中的对象以 HTML 格式显示项目

javascript - 从 Angular 中的对象以 HTML 格式显示项目

问题描述

我在显示检索到的 JSON 数据时遇到了一些问题，这些数据已放入 Angular 中的 HTML 对象中。

我可以在控制台中看到 JSON，并且我已将 JSON 数据放入对象数组中，但我无法从 HTML 中的数组中获取要显示的数据。

这是我用来提取数据并将其放入对象数组的 TS

import { Component, OnInit } from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-venue-details-db',
  templateUrl: './venue-details-db.component.html',
  styleUrls: ['./venue-details-db.component.css']
})

export class VenueDetailsDbComponent implements OnInit {


  postData = {
    command: 'get_lakeDetails',
  }
  
  url = "http://cot******.co.uk:8443"

  json: any;
  
  venues2: Object[] = [];

  venues: any; 

  constructor(private http: HttpClient) {
    this.http.post<JSON>(this.url, this.postData).toPromise().then((data) => {
      this.json = data;
      this.venues2 = [];
      console.log("feature post attempt made")
      console.log("this is the data", data)
      console.log(typeof data)

      Object.entries(data).forEach(venue => {
          console.log("Object log", venue[1][0]);
          //let venueData = (name: "", descriptin: "");
          var venueData = {"name": venue[1][0], "locale": venue[1][1], "type": venue[1][2], "availability": venue[1][3], "pricing": venue[1][4], "imgurl": "assets/img/Prison 1.jpg", "desc": venue[1][5], "overview": venue[1][6]};

          this.venues2.push(venueData);
  
      });

      this.venues = (this.venues2);



      console.log("venues", this.venues)
      console.log("json log", this.json)
      console.log(this.venues.name)
      //this.venues2 = data
    });
  } //constructor end

 
   //venues: any = (data as any).default;

  ngOnInit(): void {
 
  }

}

这是 HTML，我可以让 JSON 显示，但我无法获取数组中对象的项目。一定是在做一些傻事，因为我可以在控制台中看到它。


<pre>
  {{ json | json }}
</pre>

<div *ngFor="let items of venues">{{venues.name}}</div>

标签： javascripthtmljsonangulartypescript

解决方案

您只是在 HTML 上的代码中犯了一个错误。而不是写venues.name它应该是items.name

像这样

<div *ngFor="let items of venues">{{items.name}}</div>

推荐阅读