Question

我有一个Trip对象：

{  "id": "1",  "country":"UK",  "city": "London"  }

我正在尝试创建一个编辑表单，其中表单将使用trip对象中的值填充。我能够填充国家/地区下拉列表（ngOnInit()），并且所选国家/地区对trip.country具有约束力。但我无法获取该国家/地区的城市，因为显然trip仍然是undefined，因为它应该trip.country找到该国家/地区的城市。（我尝试打印旅行，并获得未定义）

我尝试使用getTrip()函数的异步，但我收到错误：

错误：（71,21）TS1055：输入＆＃39; void＆＃39;在ES5 / ES3中不是有效的异步函数返回类型，因为它不引用与Promise兼容的构造函数值。

我认为解决方案是某种异步/等待/保证策略，但我无法掌握它。

export class TripEditorComponent implements OnInit {
  trip;
  countries;
  cities;

ngOnInit() {
    this.getTrip();
    this.countries = this.countryService.getCountries().subscribe(
        data => { this.countries = data;},
        err => console.error(err),
        () => console.log('done loading countries')
    );
    console.log("this trip: ", this.trip) //this is undefined

    this.cities = this.cityService.getCitiesByCountry(this.trip.country).subscribe(
        data => { this.cities = data; },
        err => console.error(err),
        () => console.log('done loading cities') );
     }

getTrip(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.tripService.getTrip(id).subscribe(trip => { this.trip = trip;  });
    } else {
      this.trip = new Trip();
    }
  }
}

任何帮助将不胜感激。

Answer 1

尝试这样的事情：

getTrip(): Promise{
    return new Promise((resolve, reject) => {
        const id = this.route.snapshot.paramMap.get('id');
            if (id) {
                this.tripService.getTrip(id).subscribe(
                trip => { 
                    this.trip = trip;
                    resolve();
               },
               error=>reject(error)
             );
            }
            else {
                this.trip = new Trip();
                resolve();
            }
    })
}

用法：

this.getTrip().then(()=>{
    /*your callback here*/
})
.catch(error=>{
    /*catch exception here*/
})

如果你想使用async / await，请确保你在compilerOptions（tsconfig.json）字段＆＃34; target＆＃34;有＆＃34; ES6＆＃34;值

如何在Angular / Nodejs中使用async / await

1 个答案: