Javascript 类型为'的参数；空'；不可分配给类型为'；HttpClient'；关于角11

我刚刚学会做一名开发人员，在传递参数null时遇到问题，如下所示：

todos.component.spec.ts

 import { TodosComponent } from './todos.component';
 import { TodoService } from './todo.service';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/from';
    
    describe('TodosComponent', () => {
      let component: TodosComponent;
      let service: TodoService;
    
      beforeEach(() => {
        service = new TodoService(null); //Argument of type 'null' is not assignable to parameter of type 
      'HttpClient'.ts(2345)
        component = new TodosComponent(service);
      });
    
      it('6.1 Should set todos property with the items returned from the server', () => {
    
        const todos = [1, 2, 3];
        spyOn(service, 'getTodos').and.callFake(() => {
          return Observable.from([todos]);
        });
    
        component.ngOnInit();
    
        expect(component.todos).toBe(todos);
      });
    });

todo.component.ts

import { TodoService } from './todo.service'
    export class TodosComponent  { 
      todos: any;
      message: any; 
    
      constructor(private service: TodoService) {}
    
      ngOnInit() { 
        this.service.getTodos()
          .subscribe(t => this.todos = t);
      }
    
      add() { 
        var newTodo = { title: '... ' };
        this.service.add(newTodo)
          .subscribe(
          ( t => this.todos.push(t) ),
          ( err  => this.message = err) );
      }
    
      delete(id: number) {
        if (confirm('Are you sure?'))
          this.service.delete(id)
          .subscribe();
      }  
    }

todo.services.ts

import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

    export class TodoService { 
      constructor(private http: HttpClient) { 
      }
    
      add(todo: { title: string; }) {
        return this.http.post('...', todo)
              .map((r => r.json()));
      }
    
      getTodos() { 
        return this.http.get('...')
              .map((r => r.json()));
      }
    
      delete(id: number) {
        return this.http.delete('...')
              .map((r => r.json()));
      }
    }

这里是我使用的环境。

Angular CLI: 11.2.6
Node: 12.16.2
OS: win32 x64

Angular: 11.2.7
... animations, common, compiler, compiler-cli, core, elements
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.6
@angular-devkit/build-angular   0.1102.6
@angular-devkit/core            11.2.6
@angular-devkit/schematics      11.2.6
@angular/cdk                    11.2.6
@angular/cli                    11.2.6
@schematics/angular             11.2.6
@schematics/update              0.1102.6
ng-packagr                      11.2.4
rxjs                            6.6.6
typescript                      4.0.7

---

您需要将

HttpClient

注入到

TodoService

中，因为它将它作为一个参数。由于我们不想发出物理http请求（因为我们只是测试代码而不是api），我们将在

HttpClient

上进行监视，并将其传递给服务

从'rxjs'导入{of}
描述（'ToDoComponent'，（）=>{
在每个之前（（）=>{
const spy=jasmine.createSpyObj（'HttpClient'，{post:of（{}），get:of（{}）
服务=新TodoService（spy）
})
})

旁注：

您可以通过执行以下操作简化间谍程序：

let todos = [1,2,3,4]
spyOn(service, 'getTodos').and.returnValue(of(todos));