类型 'null' 不可分配给 Angular 中的类型 'number'

Question

我正在尝试在 Angular 中创建应用程序，但我收到 “类型 'null' 无法分配给类型 'number' 错误。问题是，如果我尝试使用 'id' 中的“任何”参数来更正此错误，那么当我单击首页上的任一面板时，应用程序不会向我显示详细信息。

期望的结果是，如果我单击任何面板：

Desired result

应用应该会显示详细信息：

Desired result 2

这是我的代码：

service.ts:

import { Observable, of } from 'rxjs';
import { Ejercicio } from './ejercicio';
import { EJERCICIOS } from './collection-ejercicios';

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

  constructor() { }

  getEjercicios():Observable<Ejercicio[]>{
    return of(EJERCICIOS);
  }
  getEjercicio(id:number):Observable<Ejercicio>{
    console.log("Id solicitado: "+id);
    return of(EJERCICIOS.find(ejercicio=>ejercicio.id===id)!);
  }

}

ejercicio.component.ts:

import { Ejercicio } from '../ejercicio';
import { EjercicioService } from '../ejercicio.service';


@Component({
  selector: 'app-ejercicios',
  templateUrl: './ejercicios.component.html',
  styleUrls: ['./ejercicios.component.css']
})
export class EjerciciosComponent implements OnInit {

  ejercicios!: Ejercicio[];
  ejercicioSeleccionado:Ejercicio | undefined;

  constructor(private ejercicioService: EjercicioService) {
    console.log("---Componente Ejercicios CREADO ---");
  }

    getEjercicios():void {
      this.ejercicioService.getEjercicios().subscribe(ejercicios=>this.ejercicios=ejercicios);
    }
  ngOnInit(): void {
  console.log("---Componente Ejercicios[ngOnInit] ---");
   this.getEjercicios();
  }

  onSelectEjercicio(ejercicio: Ejercicio): void {
    console.log("Ejercicio seleccionado="+ejercicio.id);
    this.ejercicioSeleccionado=ejercicio;
  }
}

ejercicio-detalle.component.ts:

import { Component, Input, OnInit } from '@angular/core';
import { Ejercicio } from '../ejercicio';
import { ActivatedRoute } from '@angular/router';
import { EjercicioService } from '../ejercicio.service';

@Component({
  selector: 'app-ejercicio-detalle',
  templateUrl: './ejercicio-detalle.component.html',
  styleUrls: ['./ejercicio-detalle.component.css']
})
export class EjercicioDetalleComponent implements OnInit {


  ejercicio!: Ejercicio;
  constructor(private route:ActivatedRoute, private ejercicioService: EjercicioService) { }

  ngOnInit(): void {
    this.getEjercicio();
  }
  getEjercicio():void{
    const id=this.route.snapshot.paramMap.get('id');
    this.ejercicioService.getEjercicio(id).subscribe(ejercicio=>this.ejercicio=ejercicio)
  }
}

这是我收到错误消息的行：

Error message

我已经通过在 ejercicio.service.ts 文件中添加 id:any 设法消除了错误，但是在这种情况下，当我编译应用程序时，我没有得到想要的结果（应用程序没有单击前面板时显示详细信息）。

如有任何帮助，我将不胜感激。

谢谢，

Answer 1

由于 paramMap 可能 而不是 包含 id，您必须检查您的代码以确保它确实已定义。要解决此特定问题，您只需检查它是否存在，如下所示：

getEjercicio(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) { // Add your check here. "id !== null" would work, too.
       const idAsNum = parseInt(id);
       
       // Check if this string is Not a Number.
       // If so, return, we can't continue.
       if (idAsNum === NaN) {
          return;
       }

       this.ejercicioService
          .getEjercicio(idAsNum)
          .subscribe(ejercicio => this.ejercicio = ejercicio)
    }
  }

这可能无法解决您遇到的数据未显示的问题。您可能需要使用 Angular 才能使其按预期工作。

类型 'null' 不可分配给 Angular 中的类型 'number'

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

null

syntax-error

typescript

angular