Angular: загрузочное модальное значение не привязывается в первый раз - PullRequest
Новая
       49

Angular: загрузочное модальное значение не привязывается в первый раз

0 голосов
/ 26 февраля 2019

У меня проблема с модальной привязкой (родительский к дочернему). У меня есть массив, который я заполняю из веб-службы.Массив затем передается модальному.Массив пуст при первом вызове, но не при последующих вызовах, и при щелчке я получаю значение индекса [n-1] каждый раз вместо значения индекса [n].Что может быть причиной этого?

Дочерний компонент

car-detail.html 

<div class="modal-body">
  <input [(ngModel)]="car.Id" type="number">
  <input [(ngModel)]="car.make" type="string">
</div>

Car-detail-component.ts 

export class CarDetailComponent implements OnInit {
  @Input() public car;
  constructor(private appService: AppService,
    public activeModal: NgbActiveModal,
    private route: ActivatedRoute,private location: Location) { }

  ngOnInit() {
  }

Родительский компонент

car-component.html 

 <label *ngFor="let car of carslist" (click)= "getCarDetailsById(car.id);open()">  
                {{car.make}}
                                <br/>
              </label>

Я получаю идентификатор, передаю его вызову веб-службы и открываю модальный. 

**car.component.ts**

carDetailsList: any = []; 

 public getCarDetailsById(id:number):Car[]{
      this.appService.getCarDetailsById(id).subscribe(
        car =>{

          this.carDetailsList=car;
          for (let i = 0; i < this.carDetailsList.length; i++) {
            console.log(car.make);
          }
        }
      );

      return this.carDetailsList;
      }

При первом вызове, массив пуст, не при последующих вызовах.Я получаю информацию о предыдущей машине каждый раз, когда открывается модал.Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Ваша проблема на самом деле заключается в том, что вы выполняете метод асинхронно (подписка выполняется только тогда, когда сервер возвращает запрашиваемые данные) в функцию, выполняемую синхронно, поэтому ваша функция завершится и достигнет возврата до достижения выполнения подписки, поэтому, когдаваш модал появится, массив будет пустым при первом вызове. 

public getCarDetailsById(id:number):Car[]{
this.appService.getCarDetailsById(id).subscribe(
// 1 when the server return data the code here is executed
car =>{

  this.carDetailsList=car;
  for (let i = 0; i < this.carDetailsList.length; i++) {

    console.log(car.make);
  }
}
);
// until server return data the execution continue so the return statement is reached before the code after point 1 is executed
// the variable returned will be null in that case.
return this.carDetailsList;

}

вместо этого попробуйте сделать так: 

async getCarDetailsById(id:number):Promise<Car[]> {
    var asyncResult = await this.appService.getCarDetailsById(id).toPromise();
    console.log('this console.log will be executed once the async call is fetched and the value of the returned promise is stored in asyncResult');
    return asyncResult;
}

затем вВозвращенное обещание в функции .then связывает возвращаемое значение с одним из ваших значений типа Car [].

и вы вызываете функцию 'getCarsDetailsRecovered', когда открываете свой модал.

полезная ссылка об асинхронных вызовах в угловом режиме: ссылка .

0 голосов
/ 26 февраля 2019

Вы открываете модальное значение до того, как ваша служба вернет значение.Вы должны открыть модель внутри метода subscribe.Вот почему вы не получаете значение в первый раз, при последующих вызовах вы всегда получаете старое значение.Удалите open() из родительского HTML-шаблона. 

public getCarDetailsById(id:number):Car[]{
    this.appService.getCarDetailsById(id).subscribe( car =>{ 
        this.carDetailsList=car; 
        for (let i = 0; i < this.carDetailsList.length; i++) {
            console.log(car.make);
        } 
        this.open();
        return this.carDetailsList;
    });
}
...