Angular observable：为什么参数未定义

Question

我对@9​​87654321@ 参数有疑问，就我而言，我有一个具有consult() 功能和参数响应的consultService。在使用参数响应之前调用sendConsultRequest() 函数。 sendConsultRequest 工作得很好，因为我可以在页面中看到结果，但是当我想使用参数响应导出内容时，我遇到了问题：

ERROR TypeError: Cannot read property 'dataList' of undefined

在我的选择中，响应参数在导出操作之前已经初始化，因为consultPage 工作得很好。 这是服务代码，你能告诉我为什么它不起作用吗？

@Injectable()
export class ConsultService {
  private url = 'api/consultApplication';
  response: Application;

sendConsultRequest(id: string) {
  console.log('sendConsultRequest');
  this.http.get<Application[]>(this.url)
    .subscribe(response => {
      response.map(res => {
        this.response = res;
        this.updateApplication(res);
      }),
        pipe(catchError(this.handleError('sendConsultRequest', [])));
    });
}

这里是导出页面ts：

ngOnInit() {
  console.log('ExportComponent init');
  console.log(this.consultService.response);
  this.application = this.consultService.response;

  this.appID= this.consultService.response.dataList.find(pair => 'PROCEDURE' === pair.field)
      ? this.consultService.response.dataList.find(pair => 'PROCEDURE' === pair.field).value : null;
}

谢谢。

Answer 1

每当您收到Cannot read property 'foo' of undefined 错误时，这意味着您尝试从中读取数据的对象从未被赋值。

在 JavaScript 中，如果您不设置某些内容，它将始终默认为 undefined。

let foo; // foo is undefined

此外，如果您希望函数有一个参数，但该参数从未被赋值，那么它也将是未定义的。

function foo(arg) {
   console.log(foo);
}

foo(); // the console logs 'undefined'

因此，一个很好的经验法则是，当您遇到此类错误时，这意味着该变量从未在您的代码中分配过值，您应该查看您认为您正在分配的位置它是一个值，然后重新阅读代码以确保它实际上按照您的要求工作。

这一行：

this.appID= this.consultService.response.dataList.find(pair => 'PROCEDURE' === pair.field)
  ? this.consultService.response.dataList.find(pair => 'PROCEDURE' === pair.field).value : null;

在这种情况下将不起作用，因为 this.consultService.response 未定义。您只能在为 this.consultService.response 赋值后调用该逻辑。

未定义的原因是您进行了异步 HTTP 调用，然后您尝试立即访问该值。但 HTTP 调用尚未返回，因此您的值将是未定义的。

如果你想从异步 HTTP 调用中接收值，你应该从你的服务返回 observable，然后在你的组件中订阅它。

服务：

sendConsultRequest(id: string): Observable<any> {
  return this.http.get<Application[]>(this.url).pipe(
    tap(response => {
      return response.map(res => {
        this.response = res;
        this.updateApplication(res);
      })
    ),
    catchError(this.handleError('sendConsultRequest', []))
  );
}

现在在你的组件中：

ngOnInit() {
    this.consuleService
        .sendConsuleRequestId(id)
        .subscribe(response => {
            this.appID = response.dataList.find(pair => 'PROCEDURE' === pair.field) ? response.dataList.find(pair => 'PROCEDURE' === pair.field).value : null;
        });
}

更新（显示ReplaySubject 示例）- 未测试：

服务：

consultStream: ReplaySubject = new ReplaySubject();
consult$: Observable<Consult> = this.consultStream.asObservable();

constructor() {
     this.sendConsultRequest(1);
}

sendConsultRequest(id: string): Observable<any> {
  return this.http.get<Application[]>(this.url)
      .subscribe((consult: Consult) => this.consultStream.next(consult));
}

组件：

ngOnInit() {
    this.consult$
        .subscribe((consult: Consult) => {
            // ...
        });
}

Answer 2

这不是它的工作方式。

这是它的工作原理。

@Injectable()
export class ConsultService {
  private url = 'api/consultApplication';
  response: Application;

sendConsultRequest() {
  console.log('sendConsultRequest');
  return this.http.get<Application[]>(this.url)
}

在你的组件中

ngOnInit() {
  console.log('ExportComponent init');
  console.log(this.consultService.response);

  this.consultService.sendConsultRequest().subscribe(
    response => {
      response.map(res => {
        this.consultService.updateApplication(res);
        this.appID = response.dataList.find(pair => 'PROCEDURE' === pair.field); 
      });
    }, error => this.consultService.handleError('sendConsultRequest', [])
  );
}

按照您执行此操作的方式，您永远不会调用您的服务（或者您没有发布调用的代码）。而且由于您的服务进行了异步调用，并且您想要等待它，因此您应该让您的组件等待它，而不是您的服务。

按照您执行此操作的方式，您的组件不会等待您的服务结束调用。它只是突然取了一个值，这个值很可能等于 null 或 undefined。