在 ANGULAR 5 中映射 Jenkins JSON API答案

【问题标题】：Mapping Jenkins JSON API in ANGULAR 5在 ANGULAR 5 中映射 Jenkins JSON API
【发布时间】：2018-10-13 16:37:00
【问题描述】：

使用 Jenkins JSON API 我正确地得到以下 JSON 结果：

{"_class":"hudson.model.FreeStyleBuild","estimatedDuration":50136,"fullDisplayName":"JazzClub #26","result":"SUCCESS","timestamp":1524823606642}

使用我尝试过的运行良好的 Angular 5 应用程序在仪表板中显示结果：

型号

export interface JenkinsBuild {
  _class: string;
  estimatedDuration: number;
  fullDisplayName: string;
  result: string;
  timestamp: number;
}

服务

    import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {AppComponent} from '../app.component';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Observable';
import {JenkinsBuild} from '../Model/jenkinsBuild';


@Injectable()
export class JenkinsService {

  constructor(private http: HttpClient) {
  }

  getLastBuildInfos(): Observable<JenkinsBuild> {
    return this.http.get<JenkinsBuild>(AppComponent.Jenkins_API_URL +
      '/lastBuild/api/json?tree=result,timestamp,estimatedDuration,fullDisplayName,building');
  }


}

仪表板组件

import {Component, OnInit} from '@angular/core';
import {JenkinsService} from '../Service/jenkinsService';
import {JenkinsBuild} from '../Model/jenkinsBuild';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-jenkins',
  templateUrl: './jenkins.component.html',
  styleUrls: ['./jenkins.component.css']
})
export class JenkinsComponent implements OnInit {
  jenkinsDataStringified: any;
  jenkinsData: JenkinsBuild;

  constructor(public jenkinsService: JenkinsService) {
  }

  ngOnInit() {
    this.jenkinsService.getLastBuildInfos().subscribe((data:JenkinsBuild) => {
      this.jenkinsData = data ;
    });
  }
}

一个简单的 Html 显示测试

<p>{{jenkinsData.result}}</p>
<p>{{jenkinsData.fullDisplayName}}</p>

我已尝试修复基于映射的问题来自这里的答案Type assignment issue

但我仍然收到浏览器控制台错误：ERROR TypeError: Cannot read property 'result' of undefined。

关于 JSON 映射的任何 Ideas 评论？

【问题讨论】：

标签： json angular rest rxjs mapping

【解决方案1】：

使用安全导航运算符（注意jenkinsData 后面的?）-Docs

<p>{{jenkinsData?.result}}</p>
<p>{{jenkinsData?.fullDisplayName}}</p>

这是必需的，因为您的 HTML 是在调用的异步函数返回之前加载的，这意味着在该函数返回之前，jenkinsData 是未定义的。

【讨论】：

使用安全导航运算符是处理此类问题的一种方法。在这种情况下，页面的其他部分可能会显示而没有数据，这些数据将在短暂延迟后可用。但是，如果您想在整个数据到达后加载页面，请改用 Resolve：angular.io/api/router/Resolve