我有一个动态表单,其中包含不同类型的字段。我正在使用 ion-select 显示一个下拉字段。 ion-select-options 应该从服务器获取。我是这样的:
模板代码是这样的:
<form [formGroup]="form">
<div *ngFor="let item of items;" class="form-row">
<ion-list>
<!-- SELECTION FIELD -->
<ion-item no-lines *ngIf="item.controlType === 'dropdown'" >
<ion-label position="floating">{{ item.label }}</ion-label>
<ion-select [formControlName]="item.key" [disableControl]="enableOrdisable(item)">
<ion-select-option *ngFor="let opt of (getSelectOptions(item) | async)?.result; let i = index" value="{{ opt.key }}" >{{ opt.value }}</ion-select-option>
</ion-select>
</ion-item>
<!-- TextBox FIELD -->
<ion-item no-lines *ngIf="item.controlType === 'textbox'">
<ion-label position="floating">{{ item.label }}</ion-label>
<ion-input placeholder="Enter {{ item.key }}" [formControlName]="item.key" [id]="item.key" [type]="item.type" [disableControl]="enableOrdisable(item)"></ion-input>
</ion-item>
<!-- TextArea FIELD -->
<ion-item no-lines *ngIf="item.controlType === 'textarea'">
<ion-label position="floating">{{ item.label }}</ion-label>
<ion-textarea placeholder="Enter {{ item.key }}" [formControlName]="item.key" [disableControl]="enableOrdisable(item)"></ion-textarea>
</ion-item>
<!-- CheckBox or Ion-Toggle FIELD -->
<ion-item no-lines *ngIf="item.controlType === 'checkbox'">
<ion-label position="floating">{{ item.label }}</ion-label>
<ion-toggle slot="end" [formControlName]="item.key" (ionChange)="onChange($event, item.key)"></ion-toggle>
</ion-item>
<!-- Section Start FIELD -->
<p *ngIf="item.controlType === 'dropstart'">{{ item.label }}</p>
</ion-list>
</div>
</form>
这里应该从服务器中提取ion-select选项,我这样做是这样的:
getSelectOptions(item: any): Observable<any> {
const payload = PAY_LOAD_HERE;
const url = SERVER_URL + SOME_END_POINT;
return return this.http.post(`${url}`, payload);
}
但我对此没有任何回应。