Angular 7 - 在可观察中访问服务返回未定义

达格丽米欧

我正在使用一个服务,该服务实现了一个名为AppService存储一些全局应用程序配置的全局服务

首先我的问题,我将在这里发布我的一些代码:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector, APP_INITIALIZER } from '@angular/core';
import { AppService } from './app.service';

...

export function appLoadConfig(appService: AppService) {
  return () => appService.loadConfig();
}

@NgModule({
  imports: [
    BrowserModule,
    CoreModule,
    ...
  ],
  declarations: [
    AppComponent,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appLoadConfig,
      deps: [ AppService ],
      multi: true
    }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

应用服务.ts

import { Injectable, ... } from '@angular/core';

...

@Injectable({
  providedIn: 'root'
})
export class AppService {

  loadConfig(): Promise<any> { ... }

}

文件.service.ts

import { Injectable } from '@angular/core';
import { AppService } from '../../app.service';
...

@Injectable()
export class FileService {

  filesChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);

  constructor(
    private appService: AppService,
    private httpClient: HttpClient) { }

  changeListType(types: string[]) {
    this._getAllFiles();
  }

  private _getAllFiles() {
    this.httpClient.get<any>(`${this.appService.config.api}/api/files/`)
        .subscribe(this._publishData);
  }

  private _publishData(data: FileNode[]) {
    let nodeData: FileNode[] = [];
    data.forEach((n: any) => {
      const node = new FileNode(n);
      node.fullPath = `${this.appService.config.api}/uploads/${node.uri}`;
      nodeData.push(node);
    });
    this.filesChange.next(nodeData);
  }
}

在组件中,我changeListType调用该方法时file.service,它会检索数据,但该_publishData方法显示this.appService用于构建 的node.fullPath未定义。如果我将_getAllFiles方法订阅者中的调用更改为

this.httpClient.get<any>(`${this.appService.config.api}/api/files/`)
            .subscribe((data: any) => { this._publishData(data); });

appService变量不再不确定的。这是故意的还是一种与范围变量相关的错误/错误?或者也许我在我的代码逻辑中遗漏了一些东西。

提前致谢。

礼士

您的范围有问题this

在您的第二种方法中,您没有变得appService未定义,因为您是_publishData从箭头函数中引用函数。箭头函数不会创建自己的函数,而是this使用其外部作用域中的 this。_publishData函数在这种情况下被调用this它所引用的是this组件,而不是功能的this

在此处阅读有关箭头函数的更多信息

如果您不使用箭头函数并希望获得this订阅者函数的正确值,则需要绑定this

您需要绑定正确的 this 才能_publishData发挥作用

  private _getAllFiles() {
    this.httpClient.get<any>(`${this.appService.config.api}/api/files/`)
        .subscribe(this._publishData.bind(this));
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

未定义Angular返回模块中的测试服务

可观察变量的Angular2 Observable.forkJoin-ReferenceError:未定义可观察

模拟服务调用返回Angular 2中的可观察对象?

Angular2可观察到的问题,无法读取未定义的属性“订阅”

Angular 4 Service方法始终返回未定义的状态,而是可观察的状态

错误TypeError:无法读取Angular 7拖放中未定义的属性'length'

应用程序中的Angular 7错误无法读取未定义的“ ceil”

Angular 7错误ReferenceError:未定义SystemJS

如何模拟服务Angular 7中的可观察值?

如何在Angular 7中返回可观察对象?

Angular7服务-返回包含来自另一个可观察对象的数据但包含在组件内第二个可观察对象的数据的可观察对象?

无法读取未定义的属性“长度”-Angular 7

如何在Angular 7中将服务函数作为可观察值返回?

Angular 7 NGRX存储具有未定义状态

Angular7模板驱动的验证将NgModel导出到变量中,返回未定义

Angular 7嵌套可观察对象

订阅可观察的Angular HTTP拦截器,然后返回next.handle但抛出TypeError:您提供了“未定义”

Angular 7 HttpClient获取请求未定义响应

如何使用Angular 6/7将服务注入到另一个服务中?(providedIn:'root')服务始终是未定义的

Angular 7 formGroup未定义

从Angular 7更新为8后出现“无法读取未定义的属性'map'中的错误”

将可观察数据存储到全局变量中会在 Angular 4 中返回“未定义”

Angular 7 Observer 未定义

Angular 7 服务是未定义的异常

ReferenceError: HTMLAnchorElement 未定义 Angular 7 Universal

Angular 7 Typerror:无法读取未定义的属性“userId”

服务数据获取器在 Angular 中返回未定义

在 Angular 11 / RxJS 7 中首先返回可观察位获取新令牌

Angular:订阅可观察对象时数据未定义