从Component.ts Angular 6获取数据

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

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

因为全局变量可以通过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>

Answer 4

在这里你声明了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>

希望这会有所帮助