TypeError: x(...).subscribe 不是函数

Posted 2023-02-23

【中文标题】TypeError: x(...).subscribe 不是函数

【英文标题】：TypeError: x(...).subscribe is not a function

【发布时间】：2019-01-26 22:04:37

【问题描述】：

我正在尝试对在 ngOnInit 中调用服务方法的组件进行单元测试。当我尝试运行测试时，出现错误：

TypeError: this.adminService.getTestString(...).subscribe 不是函数

以下是供参考的文件。

app.component.ts

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'ISAppAdmin';

  greet: String;
  errorMessage: String;
  constructor(private adminService: AdminService, private router: Router) 

  ngOnInit() 
    this.adminService.getTestString().subscribe(
      data => this.greet = data,
      error => this.errorMessage = < any > error
    )

    this.adminService.putTestString().subscribe(
      res => console.log(res),
      error => this.errorMessage = < any > error
    )

    console.log("in app");
  

  onClick() 
    console.log("button clicked");
    this.router.navigate(['admin']);
    console.log("still on same page");
  

app.component.spec.ts

class MockAdminService 
  res = "Hello World";
  getTestString() 
    return this.res;
  


describe('AppComponent', () => 

  let mockAdminService: MockAdminService;
  let fixture: ComponentFixture < AppComponent > ;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      providers: [
        provide: AdminService,
        useClass: MockAdminService
      ],
      imports: [HttpClientTestingModule, RouterTestingModule],
      declarations: [AppComponent],
    ).compileComponents();

    mockAdminService = new MockAdminService();
    fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    //mockAdminService = jasmine.createSpyObj(['getTestString']);

  ));
  it('should receive Hello World when getTestString is called', () => 
    let testData = "Hello World";
    fixture.detectChanges();
    expect(this.component.greet).toEqual(testData);
  );
);

admin.service.ts

@Injectable(
  providedIn: 'root'
)
export class AdminService 

  private url = 'http://localhost:8080/rest/test';
  data: String;
  constructor(private http: HttpClient) 


  getTestString(): Observable < any > 

    const headers = new HttpHeaders(
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': '*'
    );
    return this.http.get("http://localhost:8080/rest/test", 
      headers: headers,
      responseType: 'text'
    );
  

Chrome 65.0 .3325(Windows 10.0 .0) AppComponent should receive Hello World when getTestString is called FAILED
TypeError: this.adminService.getTestString(...).subscribe is not a
function
at AppComponent.ngOnInit(webpack: ///./src/app/app.component.ts?:26:43)
    at checkAndUpdateDirectiveInline(webpack: ///./node_modules/@angular/core/fesm5/core.js?:9547:19)
      at checkAndUpdateNodeInline(webpack: ///./node_modules/@angular/core/fesm5/core.js?:10811:20)
        at checkAndUpdateNode(webpack: ///./node_modules/@angular/core/fesm5/core.js?:10773:16)
          at debugCheckAndUpdateNode(webpack: ///./node_modules/@angular/core/fesm5/core.js?:11406:38)
            at debugCheckDirectivesFn(webpack: ///./node_modules/@angular/core/fesm5/core.js?:11366:13)
              at Object.eval[as updateDirectives](ng: ///DynamicTestModule/AppComponent_Host.ngfactory.js:9:9)
                at Object.debugUpdateDirectives[as updateDirectives](webpack: ///./node_modules/@angular/core/fesm5/core.js?:11358:21)
                  at checkAndUpdateView(webpack: ///./node_modules/@angular/core/fesm5/core.js?:10755:14)

谁能帮我理解我的错误以及如何纠正它。

谢谢

【问题讨论】：

AdminService 通过 return this.http.get(...) 返回一个 observable。但是MockAdminService 不会返回可观察对象。

在MockAdminService 上创建一个间谍以返回 Observable

【参考方案1】：

您的模拟服务不返回可观察对象：

import  of  from 'rxjs';

class MockAdminService 
  res = "Hello World";

  getTestString() 
    return of(this.res);
  

【讨论】：

返回 observable 是解决方案。感谢您的帮助。