Question

我正在使用Angular 4创建一个TFS管理器应用程序，它应该显示项目及其构建定义。

我有一个我在列表中显示的定义[]。在每个定义旁边，我应该显示最后一次构建的结果。问题是，为了显示上一次构建的结果，我需要为每个定义显示所有构建，在我的一些项目中，这意味着超过500个API请求。这需要超过半分钟，在构建结果准备就绪之前，您无法看到定义。

我想要实现的是显示定义并显示构建结果的原因 - 最好是一个接一个，但是如果在最后一个准备就绪时显示所有定义将是一个巨大的改进。

这是我的代码：

//api request for definitions
getBuildDefinitions(): void {
  this.http.get('http://localhost:54639/api/tfs/builddefinitions?id=' +
  this.currentProject.id).subscribe(data => {
    this.definitions = data['value'];
  })
}

//definitions declaration and setter
_definitions: Definition[];
set definitions(definitions: Definition[]) {
  this._definitions = definitions;
  this.getBuilds();
}

//get builds for all definitions
getBuilds() {
  for (let d of this._definitions) {
    this.http.get('http://localhost:54639/api/tfs/builds?projectId=' + 
    this.currentProject.id + '&definitionId=' + d.id).subscribe(data => {
      d.builds = data['value'];
    })
  }
}

//declaration of component in the main app - all the above code       
<app-definitions-list [definitions]="_definitions 
(currentDefinition)="getSelectedDefinition($event)"></app-definitions-list>

//here's how I want to display them
<button *ngFor="let d of currentDefinitions" 
(click)='onDefinitionSelected(d)'>{{ d.builds[0].result }} {{ d.name }}
</button>

我的猜测是我需要在获得构建之前制作_definitions的硬拷贝，然后将_definitions设置为带有构建的副本。但是，a）你如何在打字稿中制作硬拷贝？和b）在将_definitions设置回临时副本之前，我如何等待api请求芬兰语？ HttpClient请求是异步的并且要求我订阅它们，我必须承认我并不完全掌握这个概念。

或者也许有一种方法可以在下载时逐个显示构建结果而不是一次显示结果？

编辑：发布后发现解决方案3秒。我这样做了：

<div *ngIf="d.builds">{{ d.builds[0].result }}</div> {{ d.name }}

现在它会动态显示结果。

Answer 1

首先，您可以使用slice（）方法创建硬拷贝。

let hardCopyArray = originalArray.slice();

为了等待所有回复，你可以这样做：

getBuilds() {
  // the number of requests = the length of the array;
  let requestCount = this._definitions.length;
  for (let d of this._definitions) {
    this.http.get('http://localhost:54639/api/tfs/builds?projectId=' + 
    this.currentProject.id + '&definitionId=' + d.id).subscribe(data => {
      d.builds = data['value'];
      // each response came, decrement the requestCount
      requestCount--;
      // then check if this is the last response;
      this.isAllResponseBack(requestCount);
    })
  }
}

isAllResponseBack(requestCount : number ) {
   if(requestCount == 0) {
      console.log('this is the last response');
   }else{
      console.log('not the last response');
   }
}

如何在TypeScript（Angular 4）中从API动态下载/设置值？

1 个答案: