我剛剛在 ionic 版本 6 中創建了一個離子選擇。我的問題是我已經成功地在頁面加載時預先選擇了一個值，但是這個預先選擇的值沒有顯示在 UI 中？！
它只是在我單擊選擇之后出現，但在它不出現之前（如圖 2 所示）。我在 ionViewWillEnter 方法中加載資料并使用 NgModel 預先選擇它！
也許 NgModel 是問題所在？這是一個多選...
你可以在這里看到它：
頁面加載時的樣子
當我打開選擇時看起來像這樣（預選擇值成功
選擇的 HTML 代碼
<ion-row>
<ion-col>
<ion-item lines="inset">
<ion-label hidden>Abteilungen w?hlen</ion-label>
<ion-select (ionChange)="loadOpenTicketsForDepts()" style="min-width: 100%"
placeholder="Abteilungen w?hlen..." multiple [(ngModel)]="selectedDepartments" cancelText="Abbruch"
okText="OK">
<ion-select-option value="{{dept.id}}" *ngFor="let dept of departments">
{{dept.name}}
</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
打字稿資料加載：
ionViewWillEnter(): void {
//1. get department where logged in emp is working in
this.authService.getPersNr().then((res) => {
//now load dept
this.ticketService.getEmployeeByName(res).subscribe(emp => {
const costcenter = emp.costcentreId;
this.costCentreService.getDepartmentById(costcenter).subscribe(dept => {
//add to selected departments if it is not already in
if (this.selectedDepartments.includes(String(dept.id)) == false) {
this.selectedDepartments.push(String(dept.id))
}
//now load tickets for all selected departments
this.loadOpenTicketsForDepts();
})
})
})
this.costCentreService.getDepartments().subscribe(res => {
this.departments = res;
})
}
uj5u.com熱心網友回復：
添加對名為#departmentSelector 的選擇器的參考：
<ion-select #departmentSelector (ionChange)="loadOpenTicketsForDepts()" style="min-width: 100%"
placeholder="Abteilungen w?hlen..." multiple [(ngModel)]="selectedDepartments" cancelText="Abbruch"
okText="OK">
<ion-select-option value="{{dept.id}}" *ngFor="let dept of departments">
{{dept.name}}
</ion-select-option>
</ion-select>
然后你可以在視圖加載后從你的打字稿類訪問它：
宣告您的參考：
@ViewChild("departmentSelector") departmentSelector!: IonSelect;
然后您可以在視圖完全加載時訪問它：
ngAfterViewInit(){
//your async function ...
this.authService.getPersNr().then((res) => {
//now load dept
this.ticketService.getEmployeeByName(res).subscribe(emp => {
const costcenter = emp.costcentreId;
this.costCentreService.getDepartmentById(costcenter).subscribe(dept => {
//add to selected departments if it is not already in
if (this.selectedDepartments.includes(String(dept.id)) == false) {
// this.selectedDepartments.push(String(dept.id))
this.departmentSelector.value = String(dept.id);
}
//now load tickets for all selected departments
this.loadOpenTicketsForDepts();
})
})
})
//
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411201.html
標籤：