1

在我的 ngOnInit 函数中（在 vehicle.component.ts 中），我从服务器接收数据，然后将该车辆数组发送到 Store。之后，我订阅了商店数据以查找车辆。但是当我调用vehicle.find()时，我的模板已经呈现错误 - 当然没有找到车辆......我应该怎么做才能解决这个问题？

ngOnInit() {
let id = this._route.snapshot.params.id ? this._route.snapshot.params.id : null;
if(id){ // Передан id       
  this.newVehicle = false;     
  // Если не были загружены данные, загрузить 
  if (!this._vehicleService.dataIsLoaded){ 
    this._vehicleService.getVehicles().subscribe(vehicles => {
      this._store.dispatch({type: INIT_VEHICLES, payload: vehicles});   
      this.vehicles.subscribe(vehicles => {
        this.vehicle = vehicles.find(item => item.id === Number(id))
      }); 
    })
  } else {
    this.vehicles.subscribe(vehicles => 
      this.vehicle = vehicles.find(item => item.id === Number(id))
    );  
  }   
  if(!this.vehicle) 
    console.error('No Vehicle found!');
} else { // id пустой, создаем новый объект      
  this.vehicle = new Vehicle(this.getLastVehicleId()+1, null, null);      
}

}

我的模板（vehicle.component.html）：

<h3>{{ vehicle.name }}</h3>
<div><label>Id: </label>{{ vehicle.id }}</div>
<div>
  <label>Name: </label>
  <input [(ngModel)]="vehicle.name" placeholder="name" />
</div>
<p>
  <button (click)="saveVehicle()">Back</button>
  <button class="abort" (click)="removeVehicle()">Remove</button>
</p>

完整的源代码在这里：GitHub ，在 GitHub Pages上运行的最后一个版本

附言

要重现错误，您应该导航到车辆信息页面并按 F5。不在ghpages上复制，它只是崩溃）

4

0 回答 0