'{ 名称类型的参数：字符串；编号：空； }' 不可分配给 'User' 类型的参数

Question

我正在使用内存 Web api 制作 angular 应用程序。当我尝试使 addUser() 起作用时，这是我在 createUser(data):

处遇到的错误

Argument of type '{ name: string; id: null; }' is not assignable to parameter of type 'User'. Types of property 'id' are incompatible. Type 'null' is not assignable to type 'number'.ts(2345)

用户-list.components.ts:

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/users/users.model';
import { UserService } from 'src/app/users/user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  user = {
    name: '',
    id: null
  }

  edit = true;
  add = false;
  users!: User[];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.getUsers()
  }

  private getUsers(){
    this.userService.getUsers().subscribe(users => this.users = users)
  }

  addUser(){
    const data = {
      name: this.user.name,
      id: this.user.id
    };
    this.userService.createUser(data).subscribe(response => {
      console.log(response)
      this.getUsers();
    })
  }
}

user.service.ts:

import { Injectable } from '@angular/core';
import { User } from './users.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  
  private usersUrl = 'api/users/';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.usersUrl).pipe(
      retry(2),
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return throwError(error);
      })
    );
  }

  createUser(user: User): Observable<User> {
    user.id === null;
    return this.http.post<User>(this.usersUrl, user).pipe(
      catchError((error: HttpErrorResponse) => {
        console.error(error);
        return throwError(error);
      })
    )
  }

  editUser(user: User): Observable<any> {
    return this.http.put(this.usersUrl + user.id, user);
  }

  deleteUser(id: number): Observable<any> {
    return this.http.delete(this.usersUrl + id);
  }
}

Answer 1

这是由于 typescript 版本 2.1 或更高版本，请检查您的 tsconfig.json 文件并搜索 strictNullChecks，您会看到它的值是真的。

我相信在您的用户模型中，参数 id 的类型为 number，但是在您的组件内部您创建了一个默认用户对象，具有默认值，在该对象内部 id参数有空值，

由于这个 null 值，它会抛出这样的错误，我建议您更新您的组件的默认用户对象，类型为 User Model，更新后，您的代码将如下所示

user: User = {
  name: '',
  id: 0
}

现在，如果您将 null 分配给 id 参数 ，IDE 或代码编辑器本身会显示错误，类似于此

Type 'null' is not assignable to type 'number'

'{ 名称类型的参数：字符串；编号：空； }' 不可分配给 'User' 类型的参数

Argument of type '{ name: string; id: null; }' is not assignable to parameter of type 'User'

angular-datatables

angular