Question

我成功地从其他api获取数据，并使用console.log显示如下：

这是我在dashboard.component.ts中的代码

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { TicketService } from '../../ticket.service';
import {Chart} from 'chart.js';

@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.less'],
 encapsulation: ViewEncapsulation.None
})
 export class DashboardComponent implements OnInit {
 temp = [];

 constructor(private ticketService: TicketService) {}

 ngOnInit() {
   this.ticketService.getTicket().subscribe((res)=>{
     console.log(res);
  })
 }

如果要在dashboard.component.html的视图中获取“ tot_site”值，该怎么办？

<div class="kpi">
   <div style="center" class="color-gray">Network activity</div>
   <div class="item">
     <span class="text-xl"></span>
     <span class="text-lg color-gray"> Tickets</span>
   </div>
</div>

请帮助我，谢谢...

Answer 1

您需要将API响应分配给公共变量。您可以使用* ngFor在模板中循环结果。

组件：

public apiData;
ngOnInit() {
   this.ticketService.getTicket().subscribe((res)=>{
     this.apiData = res;
  })
 }

模板：

<div class="kpi">
   <div style="center" class="color-gray">Network activity</div>
   <div class="item" *ngFor="let item of apiData">
     <span class="text-xl"></span>
     <span class="text-lg color-gray"> {{item.tot_sites}}</span>
   </div>
</div>

Answer 2

组件：

声明一个变量以存储网站总价值：

total_sites:any;

检查响应是否包含您的数组，并相应地更新变量。

ngOnInit() {
   this.ticketService.getTicket().subscribe((res)=>{
     console.log(res);

if(res && res.length){
 this.total_sites = res[res.length-1].tot_sites;
}
  });

模板：

将该变量绑定到您的视图中：

<div class="kpi">
   <div style="center" class="color-gray">Network activity</div>
   <div class="item">
     <span class="text-xl"></span>
     <span class="text-lg color-gray">{{total_sites}}</span>
   </div>
</div>

如果可以在响应中获得对象而不是数组，那会更好。

Answer 3

这里您已声明temp数组，可以使用{{ temp[0].tot_site }}

在HTML中访问该数组。

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { TicketService } from '../../ticket.service';
import {Chart} from 'chart.js';

@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.less'],
 encapsulation: ViewEncapsulation.None
})
 export class DashboardComponent implements OnInit {
 temp = [];

 constructor(private ticketService: TicketService) {}

 ngOnInit() {
   this.ticketService.getTicket().subscribe((res)=>{
     this.temp = res;
     console.log(res);
  })
 }

HTML

<div class="kpi">
   <div style="center" class="color-gray">Network activity</div>
   <div class="item" *ngFor="let item of temp" >
     <span class="text-xl"> {{ item.tot_site }}</span>
     <span class="text-lg color-gray"> Tickets </span>
   </div>
</div>

希望这会有所帮助

Answer 4

像这样定义一个全局变量并存储响应值。

由于全局变量可以通过html访问。

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { TicketService } from '../../ticket.service';
import {Chart} from 'chart.js';

@Component({
 selector: 'app-dashboard',
 templateUrl: './dashboard.component.html',
 styleUrls: ['./dashboard.component.less'],
 encapsulation: ViewEncapsulation.None
})
 export class DashboardComponent implements OnInit {
 temp = [];
 dataset:any;

 constructor(private ticketService: TicketService) {}

 ngOnInit() {
   this.ticketService.getTicket().subscribe((res)=>{
     this.dataset=res;
     console.log(res);
  })
 }

在html中，您可以循环浏览数据集并显示所需的值

<div class="kpi">
   <div style="center" class="color-gray">Network activity</div>
   <div class="item" *ngFor="let data of dataset">
     <span class="text-xl">{{data.tot_in}}</span>
     <span class="text-lg color-gray"> {{data.tot_sites}}</span>
     <span class="text-lg color-gray"> {{data.todays_achieve}}</span>
     <span class="text-lg color-gray"> {{data.todays_target}}</span>
   </div>
</div>

或者如果响应数组中只有元素

然后仅存储这样的tot_sites值

ngOnInit() {
       this.ticketService.getTicket().subscribe((res)=>{
         this.dataset=res[0].tot_sites;
         console.log(res);
      })
     }

和html

<div class="kpi">
       <div style="center" class="color-gray">Network activity</div>
       <div class="item" >
         <span class="text-lg color-gray"> {{dataset}}</span>
       </div>
    </div>

从Component.ts Angular 6获取数据

4 个答案: