Я очень новичок в угловой. Я пытаюсь вызвать метод 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
