Question

我正在尝试加载一组保存的模板，以便能够从它们中选择离子选择，并根据选择的选项来更新表格。

这是我的模板的组成方式：

    export interface Template {
 ...
  destination: string; //iban
  recipient: string;
  amount: number;
  reference: string;
}

这就是我的离子选择的外观：

 <ion-item>
           <ion-label>Load template</ion-label>
           <ion-select (change)="this.transactionForm.patchValue({recipient: template.recipient, destination: template.destination, amount: template.amount, reference: template.reference})">
             <ion-option *ngFor = "let template of templates;">
               {{template.reference}}
             </ion-option>
           </ion-select>
         </ion-item>

想法是加载已保存的模板并在列表中选择一个，以便您选择后更新我填写的表单中的值。

这是我在.ts文件的构造函数中初始化表单的方式：

 constructor( public formBuilder: FormBuilder, public templateServicerino: TemplateService) {
    this.templateServicerino.createTemplate("DE365849", "John Johnson", 420, "Testerino");
    this.templates = this.templateServicerino.getAllTemplates();
    this.transactionForm = this.formBuilder.group({
          recipient: [''],
          destination: [''],
          amount: ['0'],
          reference:  ['']
        });

当我进行测试时，当我单击选择时确实得到了一个名为“ Testerino”的选项，但是一旦按下OK，表单就不会更新。我的IDE表示其中的“模板”字段未解析

预先感谢您的帮助

Answer 1

您试图访问元素范围之外的模板引用。更改方法不是离子方法。请参阅此链接https://github.com/ionic-team/ionic/issues/7807

更多参考检查离子文档：https://ionicframework.com/docs/api/components/select/Select/

<ion-item> <ion-label>Load template</ion-label> <ion-select [(ngModel)]="selectObj" (ionChange)="onSelectChange($event,selectObj)" > <ion-option *ngFor = "let template of templates;"> {{template.reference}} </ion-option> </ion-select> </ion-item>

在构造函数方法之后在组件中粘贴代码。

 onSelectChange(selected:any,selectObj){
  console.log(selected,selectObj)
  this.transactionForm.patchValue({recipient: selectObj.recipient, destination: 
  selectObj.destination, amount: selectObj.amount, reference: selectObj.reference})
 }

如何基于所选选项更新表单？

1 个答案: