角度为6

Question

我有一个来自我组件的复杂对象：

{
    "result": true,
    "metrics": {
        "callCounters": "",
        "campaignDetails": {
            "CampaignCount": 123,
            "DepartmentCount": 25
        },
        "callTypeCounts": {
            "IncomingCallCountBase": 59644,
            "IncomingCallCount": 0,
            "OutgoingCallCountBase": 2627223,
            "OutgoingCallCount": 0,
            "ManualCallCount": 6,
            "IvrCallCount": 0,
            "IvrCallCountBase": 1270098
        },
        "campaignCallCounts": []
    }
}

＆我的component.ts代码如下所示。

import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'campaign-header',
  templateUrl: './campaign-header.component.html',
  styleUrls: ['./campaign-header.component.css']
})
export class CampaignHeaderComponent implements OnInit {
  metricsInfo : any[];

  constructor(private campaignService:CampaignService ) { }

  ngOnInit() {

    this.campaignService.MetricsInfo()
    .subscribe(response =>{
      debugger;
      console.log(response.json())
      this.metricsInfo = response.json();
     
    })

  }
 
}

我的服务也是如此：

import {
  Injectable
} from '@angular/core';
import {
  Http
} from '@angular/http';
import {
  HttpClient
} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CampaignService {

  constructor(private http: Http) {}

  MetricsInfo() {

    return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
  }

}

我想在Angular 6应用程序的"IncomingCallCountBase"页面上打印component.html。

我尝试了类似的操作，{{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}，但是它不起作用。还有如何添加两个字段“ IncomingCallCountBase ”和“ OutgoingCallCountBase ”，非常感谢您的帮助！

注意：：“ metricsInfo ”是我的组件已订阅对象。

P.S：此日志是在尝试解决方案之后。

[

Answer 1

我可以看到您已经以Angular 5方式实现了该服务（即，没有明确的地图用于服务响应）。

但是您使用http创建的Http对象。应该使用HttpClient创建它，因为Http已被弃用。

如果您想使用Http，请按照以下方式修改代码（不推荐）：

// in component.service.ts file

MetricsInfo() {

    return this.http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics')
    .map((response:Response) => {
            console.log("From  service == ", response.json());
            return response.json();
        }); 
  }
  
  //in component.ts file 
  
  ngOnInit() {
    this.loadInitialData();
  }
  
  // loads inial data
  
  
  loadInitialData(){
   this.campaignService.MetricsInfo()
    .subscribe(response =>{
      this.metricsInfo = response;
      this.getTotal();
    })
  }

<!-- In component.html  -->
<div class="container">
  {{ metricsInfo?.metrics.callTypeCounts.IncomingCallCountBase }}
  </div>

如果要使用Httpclient，请按照以下方式修改代码：

// in component.service.ts file
import { HttpClient, HttpParams } from '@angular/common/http'; // import Httpclient

// create Httpclient object
// you might need to adjust headers and requestObject **if you are using 


constructor(
    private _http: HttpClient,
  ) {}



MetricsInfo() {
    return this._http.get('http://xxx.xx.xxx.xxx/portal/api/landingPageMetrics');
  }
  
  //in component.ts file 
  
  ngOnInit() {
    this.loadInitialData();
  }
  
  // loads inial data 
  
  loadInitialData(){
   this.campaignService.MetricsInfo()
    .subscribe(response =>{
      this.metricsInfo = response;
      this.getTotal();
    })
  }

回到加法，您可以使用@Prudhvi的建议：

getTotal(){
  return this.metricsInfo.metrics.callTypeCounts.IncomingCallCount + this.metricsInfo.metrics.callTypeCounts.OutgoingCallCountBase;
}