Question

我对模式绑定（父级到子级）有疑问我有一个从Web服务填充的数组。然后将数组传递给模式。第一次调用时该数组为空，但在随后的调用中该数组为空，单击时，每次获得[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>

我获得ID并将其传递给Web服务调用，然后打开模式。

**car.component.ts**

carDetailsList：任意= [];

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

在第一次调用时，数组为空，而不在后续调用中。每当模式打开时，我都会得到以前的汽车详细信息。感谢您的帮助。

Answer 1

您要在服务返回值之前打开模式。您应该在subscribe方法内打开模型。这就是为什么您没有第一次获得价值的原因，在随后的调用中，您总是会获得旧的价值。从父HTML模板中删除open()。

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

Answer 2

您的问题实际上是您将方法异步执行（仅在服务器返回要求的数据时才执行订阅）到同步执行的函数中，因此您的函数将在到达订阅执行之前结束并到达返回值，这就是为什么您的模态将弹出，在第一次调用时该数组将为空。

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”函数。

有关在角度link中进行异步调用的有用链接。

角度（Angular）：引导模式值不会在第一次绑定

2 个答案: