类型"null"不能分配给Angular中的类型"数字"

Question

我正试图在Angular中创建一个应用程序，但我得到了一个"类型"null"不可分配给类型"number"错误。问题是，如果我试图通过使用"；任何"；参数，则当我单击首页上的任一面板时，应用程序不会向我显示详细信息。

想要的结果是，如果我点击任何面板：

期望结果

应用程序应该向我显示详细信息：

期望结果2

这是我的代码：

服务.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.comcomponent.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)
}
}

这是我收到eror消息的那一行：

错误消息

我通过在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路由侦听器使其按预期工作。