Angular 17 показывает объект, возможно, «нулевой» ⇐ Html

[Anonymous]

Я очень новичок в угловой. Я пытаюсь вызвать метод Get Web API на кнопке. Теперь я хочу отобразить ответ в HTML. Когда я пытаюсь получить доступ к объекту модели, он говорит: < /p>
объект, возможно, «null '. Пожалуйста, смотрите функцию GetPatientByDate . Функция вызывается, а объект Res имеет данные.
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Observable } from 'rxjs';
import { PatientModel } from '../models/PatientModel.model';
import { AsyncPipe } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, HttpClientModule, AsyncPipe, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})

export class AppComponent {
title = 'Patient Details';
http = inject(HttpClient);

patients$ = this.GetPatients();
//patient$ = this.GetPatientByDate();
inputValue: string = '';
patientDetail: PatientModel | null = null;

private GetPatients(): Observable
{
return this.http.get('https://localhost:7076/api/Appointments');
}

showAlert(): void {
if (this.inputValue) {
this.http.get('https://localhost:7076/api/Appointments ... inputValue).subscribe((res: PatientModel) => {
alert("Name:" + res.name + " && id:" + res.id + " && Appointment Date:" + res.appointmentDate);
});
} else {
alert("None");
}
}

GetPatientByDate(): void {
this.http.get('https://localhost:7076/api/Appointments ... inputValue).subscribe((res: PatientModel) => {
this.patientDetail = res;
});
}
}
< /code>
Модель, которую я имею, заключается в следующем: < /p>
export interface PatientModel {
id: string;
name: string;
appointmentDate: string;
reason: string;
}

app.component.html выглядит следующим образом. См. PatteryDetail.name .
{{title}}


table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}



ID Name Appointment Date Reason

@if (patients$ | async; as patients) {
@if (patients.length > 0) {
@for (item of patients; track $index) {


{{ item.id }}


{{ item.name }}


{{ item.appointmentDate }}


{{ item.reason }}


}
}
@else {
Nothing found
}
}


Enter Date:



Show Alert

Value bound to component property: {{ inputValue }}

Details:{{ patientDetail.name }}


Подробнее здесь: https://stackoverflow.com/questions/796 ... sibly-null