属性在Angular 9上可观察的类型上不存在

只有在我使用双向绑定访问其属性时，类型可观察对象似乎在模板上未定义。当我尝试使用{{interpolation}}语法访问属性时，它可以工作。例如：

{{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>

航班计划
成功更新！
所有字段都是必填字段
航空公司
航班号
行程类型
{{trip_type}}
出发机场
到达机场
离港日
返回日期
提交

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();
  }

}

从'@angular/core'导入{Component，OnInit}；
从“rxjs”导入{observed，ObservedValueOf}；
从“./models/Flight”导入{Flight}；
从“./services/flight.service”导入{FlightService}；
从“@angular/router”导入{ActivatedRoute}”；
@组成部分({
选择器：“应用程序飞行编辑”，
templateUrl:'./flight edit.component.html'，
样式URL:['./flight edit.component.css']
})
导出类FlightDitComponent实现OnInit{
飞行：可见；
航班号：号码；
成功：布尔值=false；
行程类型=[“单程”、“往返”、“多目的地”]；
建造商（专用flightService:flightService，
私有activatedRoute:activatedRoute）{}
恩戈尼尼特（）{
this.activatedRoute.paramMap.subscribe(
参数=>{
this.flight_id=编号（参数get（“id”））；
}
);
此参数为.loadFlightData（）；
}
loadFlightData（）{
this.flightService.getFlight（this.flightid）
.订阅(
数据=>{
这个飞行=数据；
}
);
}
updateFlight（）{
this.flightService.updateFlight（this.flightid，this.flightService）
.订阅(
数据=>{
this.flight=可观察的数据；
这就是成功；
},
error=>console.log（“Oops.cannotupdate！”+错误）
);
}
onSubmit（）{
this.updateFlight（）；
}
}

航班服务

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)
    }

}

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient}
从“rxjs”导入{observatable}
从“../models/Flight”导入{Flight}
@注射的({
providedIn:'根'
})
出口级航班服务{
专用终结点http://127.0.0.1:8000/flights/';
构造函数（私有http:HttpClient）{}
getFlight（id:编号）：可观察{
返回this.http.get（this.endpoint+id）
}
//获得所有航班
getAllFlights（）：可观察{
//log（this.http.get（this.endpoint））
返回this.http.get（this.endpoint）
}
//后添加新航班
flightCreate（飞行：飞行）：可观察{
返回this.http.post（this.endpoint，flight）
}
//放置-更新
updateFlight（id:number，payload:any）：可观察{
返回this.http.put（this.endpoint+id，有效负载）
}
}

嗯，我们需要做一些更改

在

flightedit组件中

//注释下面的行，让我们更改属性名称和类型
//飞行：可见；
_航班$=新行为主体（空）；
...
恩贡德斯特罗（）{
//最佳实践：完成有关组件移除的所有主题
如果（本次航班$&！本次航班$关闭）{
此._fligth$.complete（）；
}
}
...
loadFlightData（）{
this.flightService.getFlight（this.flightid）
.subscribe（数据=>this._flight$.next（数据））；
}

在模板中 替换此项：

为此：

您不应该将ngModel绑定到一个可观察的对象，从代码上看，您似乎在订阅中设置了flight，所以应该是flight！您的代码中还有一些其他问题，例如，当组件被销毁时，您并没有在getflight方法中处理订阅，这将导致内存泄漏。您还可以在组件中更改flight to flight$，他不必到处更改flight谢谢！这就解决了问题。对于noob的问题很抱歉，但是为什么在这种情况下，观测不起作用呢@julianobrasilAn observable只是一个最终发出值的高阶函数。您正在为所有表单字段设置一个函数。如果您打算使用angular，您将了解反应式编程。一开始很难，但一旦你改变了你的心态，这将改变游戏规则。只要谷歌就可以了。一旦你开始学习，一个很好的参考是。我会在这里回应@julianobrasil。学习曲线是陡峭的，但一旦你把你的头绕在它周围，并对它感到舒适，它就会产生如此好的代码，并且对性能也有很大的帮助。