Angular 8中如何在subscribe外部保留Service返回的Controls列表

这个问题是典型的异步操作时序问题——controlService.getControls()返回的是一个Observable，它的subscribe回调是异步执行的：当你调用onSubmit后，浏览器会先发送请求，然后继续执行后续代码，只有当服务端返回数据后，subscribe里的代码才会执行并给this.controls赋值。如果在数据返回前就点击按钮调用exportToCSV，自然会拿到undefined。

下面给你两种靠谱的解决方案：

方案一：通过状态变量控制导出时机（简单直接） #

我们可以加一个状态变量标记数据是否加载完成，避免用户在数据准备好前点击导出按钮，同时在导出前做校验：

public controls: Control[];
public isDataLoaded = false; // 新增：标记数据是否加载完成

constructor(
  private readonly controlService: ControlService,
) { }

public onSubmit(): void {
  // 注意：你原来的代码里拼写错误，controleService → controlService
  this.controlService.getControls(
    this.idPerson,
    this.getMomentDate(dControlDate),
    this.getMomentDate(fControleDate),
  ).subscribe(c=> {
    this.controls = c.response.controls;
    this.isDataLoaded = true; // 数据加载完成后更新状态
  });
}

exportToCSV() {
  // 导出前先校验数据状态
  if (!this.isDataLoaded || !this.controls?.length) {
    alert('请先提交加载数据，或当前没有可导出的数据！');
    return;
  }
  
  console.log(this.controls); // 现在就能正常拿到数据了
  // 在这里编写你的CSV导出逻辑
}

然后在模板里给导出按钮加禁用状态，从UI层面避免误操作：

<button (click)="exportToCSV()" [disabled]="!isDataLoaded">导出CSV</button>

方案二：用BehaviorSubject存储数据（更健壮，适合复杂场景） #

如果你的组件逻辑比较复杂，或者需要在多个地方共享这个数据，推荐用RxJS的BehaviorSubject来存储数据——它能始终保存最新的数值，不管什么时候调用都能拿到当前最新的列表：

import { BehaviorSubject } from 'rxjs';

// 私有Subject：用于内部更新数据
private controlsSubject = new BehaviorSubject<Control[]>([]);
// 公共可观察对象：对外暴露数据，避免外部直接修改
public controls$ = this.controlsSubject.asObservable();

constructor(
  private readonly controlService: ControlService,
) { }

public onSubmit(): void {
  this.controlService.getControls(
    this.idPerson,
    this.getMomentDate(dControlDate),
    this.getMomentDate(fControleDate),
  ).subscribe(c=> {
    // 将最新数据传入Subject
    this.controlsSubject.next(c.response.controls);
  });
}

exportToCSV() {
  // 获取Subject中当前的最新数据
  const currentControls = this.controlsSubject.value;
  
  if (currentControls.length === 0) {
    alert('没有可导出的数据！');
    return;
  }
  
  console.log(currentControls);
  // 执行CSV导出逻辑
}

额外注意点 #

1. 修正代码中的拼写错误：你原来的this.controleService多写了一个e，应该是this.controlService，这个错误会直接导致请求无法发送，一定要修正。
2. 永远记住Observable的异步特性：不要假设subscribe里的代码会立刻执行，所有依赖异步数据的操作，都要确保数据已经返回后再执行。

内容的提问来源于stack exchange，提问作者Nitneuq