angular - 角度 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 ”是我的组件订阅对象。

PS：此日志是在尝试解决方案之后。

[

标签： angularangular6

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();
    })
  }

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

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