Видимый объект Observable, кажется, не определен в шаблоне, только когда я использую двустороннюю привязку для доступа к его свойствам. Когда я попытался получить доступ к свойству с использованием синтаксиса {{interpolation}}, это сработало. Как пример: <h1>{{flight.airline}}</h1> работает, но <input type="text" class="form-control" id="airline" name="airline" [(ngModel)]="flight.airline"> не работает. Любой элемент, который использует двустороннее связывание, имеет эту проблему.
Я пытался использовать оператор elvis ?. и использовать директиву *ngIf, думая, что это потому, что данные были просто изначально недоступны, но появляется та же ошибка , Если кто-то может указать мне, что я делаю неправильно, я буду очень признателен
flight-edit.component. html
<div class="container">
<h1>Flight Scheduler</h1>
<div class="col-lg-8 ">
<h3 *ngIf="success" class="text-success">Successfully updated!</h3>
<h4 class="float-right"><small>All fields are required</small></h4>
<div class="row well center">
<form (ngSubmit)="onSubmit()">
<div class="col-sm-12">
<div *ngIf="flight" class="row">
<div class="col-sm-6 form-group">
<label>Airline</label>
<input type="text" class="form-control" id="airline" name="airline" [(ngModel)]="flight.airline">
</div>
<div class="col-sm-6 form-group">
<label>Flight Number</label>
<input type="text" class="form-control" name="flight_no" [(ngModel)]="flight.flight_no">
</div>
</div>
<div class="form-group" style="border:1px solid #ced4da; padding:10px; border-radius: 5px;">
<label>Trip Type</label>
<div *ngIf="flight" class="radio">
<ng-container *ngFor="let trip_type of trip_types; let i=index">
<label for="radios-{{i}}" style="margin-right:20px">
<input type="radio" name="trip_type" id="radios-{{i}}"
[checked]="flight.trip_type==trip_type"
[value]="trip_type"
(change)="flight.trip_type=trip_type">
{{trip_type}}
</label>
</ng-container>
</div>
</div>
<div *ngIf="flight" class="row">
<div class="col-sm-6 form-group">
<label>Departure Airport</label>
<input type="text" class="form-control" name="departure_airport" [(ngModel)]="flight.departure_airport">
</div>
<div class="col-sm-6 form-group">
<label>Arrival Airport</label>
<input type="text" class="form-control" name="arrival_airport" [(ngModel)]="flight.arrival_airport">
</div>
</div>
<div *ngIf="flight" class="row">
<div class="col-sm-6 form-group">
<label>Departure Date</label>
<input type="date" class="form-control" name="departure_date" [(ngModel)]="flight.departure_date">
</div>
<div class="col-sm-6 form-group">
<label>Return Date</label>
<input type="date" class="form-control" name="return_date" [(ngModel)]="flight.return_date">
</div>
</div>
<button type="submit" class="btn btn-lg btn-info">Submit</button>
</div>
</form>
</div>
</div>
</div>
flight-edit.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable, ObservedValueOf } from "rxjs";
import { Flight } from "../models/flight";
import { FlightService } from "../services/flight.service";
import { ActivatedRoute } from "@angular/router";
@Component({
selector: 'app-flight-edit',
templateUrl: './flight-edit.component.html',
styleUrls: ['./flight-edit.component.css']
})
export class FlightEditComponent implements OnInit {
flight: Observable<Flight>;
flight_id: number;
success: boolean = false;
trip_types = ["One Way","Round Trip","Multiple Destinations"];
constructor(private flightService: FlightService,
private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.activatedRoute.paramMap.subscribe(
params => {
this.flight_id = Number(params.get("id"));
}
);
this.loadFlightData();
}
loadFlightData(){
this.flightService.getFlight(this.flight_id)
.subscribe(
data => {
this.flight = data;
}
);
}
updateFlight(){
this.flightService.updateFlight(this.flight_id,this.flight)
.subscribe(
data => {
this.flight = data as Observable<Flight>;
this.success = true;
},
error => console.log("Oops. Cannot update! " + error)
);
}
onSubmit(){
this.updateFlight();
}
}
flight.service.ts
import { Injectable } from '@angular/core';
import {HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs'
import { Flight } from '../models/flight'
@Injectable({
providedIn: 'root'
})
export class FlightService {
private endpoint = 'http://127.0.0.1:8000/flights/';
constructor(private http: HttpClient) {}
getFlight(id: number): Observable<any>{
return this.http.get(this.endpoint + id)
}
//GET all flights
getAllFlights(): Observable<any>{
// console.log(this.http.get(this.endpoint))
return this.http.get(this.endpoint)
}
//POST - add new flight
flightCreate(flight: Flight): Observable<object>{
return this.http.post(this.endpoint, flight)
}
//PUT - update
updateFlight(id: number, payload: any): Observable<object> {
return this.http.put(this.endpoint + id, payload)
}
}