Question

我正在使用一个父组件travelerInput，它使用我的组件中的模型创建了travelerListForm，并迭代它提取travelerForm，然后使用@Input将其传递给嵌套的子组件：

for (let i = 1; i <= numberOfTravelers; i++) {
  const tId = `${ptc}_0${i}`;
  const Id = `${TravelerInput.pIndex++}`;
  const traveler = new Traveler({passengerTypeCode: ptc, id: Id, tid: tId, names: [new Identity({
    firstName: "",
    middleName: "",
    lastName: "",
    title: "",
    nameType: "native",
    isDisplayed: false
    })],
  dateOfBirth: undefined ,
  gender: "unknown",
  accompanyingTravelerId: "",
  accompanyingTravelerTid: ""
});
travelerList.push(traveler);
}

HTML

<div class="alpi-section col-xs-12 col-sm-12 col-md-12 col-lg-12"
      *ngFor="let travelerForm of travelerListForm.controls; let tIndex = index;">

      <o3r-simple-traveler-input 
      [config]="config.simpleTravelerInput"
      [travelerForm]="travelerForm"
      [index]="tIndex">          
      </o3r-simple-traveler-input>

现在我们在父组件中有一个下拉列表，其中包含一个旅行者列表。下拉列表中的所选乘客将在表单字段中预先填充其信息，这些字段是嵌套的子组件。我正在使用travelerForm，它在子组件中的travelerListForm上迭代为@Input。在更改下拉列表时，我将乘客信息的值绑定到travelerListForm的相应索引，该索引也会更新，但在UI上没有更新。

 pickSelectedADTPassenger(adult:any, index: number){

      this.selectedADTId= this.ADTTravelerId[adult];

    this.travelerListForm.controls[index].value.names[0].firstName = this.selectedADTId.IDENTITY_INFORMATION.FIRST_NAME; //ASSISGNMENT

    }

还尝试在子组件输入字段中使用 ngModel ，我想要预先填充值，但它不起作用：

<input type="text"
            [(ngModel)]="travelerForm.controls.firstName.value"
            class="form-control"
            placeholder="FIRST NAME"
            maxlength="52"
            formControlName="firstName">
 </div>

请建议。

Angular5数据预填充单向绑定没有发生

0 个答案: