所以我用IONIC制作了一個應用程式。我使用標簽 ion-select 和 ion-select-option 來選擇一個或多個選項并將它們發送到打字稿（到目前為止有效）。
現在我希望有人能夠編輯他們的選項。這意味著一些 ion-select-option 應該被 [selected]（選中為 true）。
有誰知道這是否可能？我為此使用了 2 個不同的陣列。
user.companys（用戶添加到應用程式的所有公司）
Blocked.companies（所有被阻止的公司已添加到他們被阻止的聯系人中）我正在使用 user.companies 來顯示所有的 ion-select-option 選項（要選擇的公司）
如果 ion-select-option 值存在于 blocks.companies 陣列中，則應選擇
這是我的代碼。如果需要更多說明，請告訴我，我會提供。謝謝
HTML
<ion-select multiple="true" [(ngModel)]="selectedCompanies" class="selectModal" placeholder="Add one or more companies" text="Hello" okText="Ok" cancelText="Dismiss">
<ion-select-option selected="{{isSelected}}" *ngFor="let company of user.company; let i=index" value="{{company.company_name}}">{{company.company_name}}</ion-select-option>
</ion-select>
打字稿
import { Component, OnInit, Input } from '@angular/core';
import { ModalController} from '@ionic/angular';
import { LoginService } from 'src/app/login.service';
@Component({
selector: 'edit-blocked',
templateUrl: './edit-blocked.page.html',
styleUrls: ['./edit-blocked.page.scss'],
})
export class EditBlockedPage implements OnInit {
user = this.loginSrvc.user;
blocked = this.loginSrvc.editNumber;
blockedToggle: any;
minDate = new Date().toISOString();
selectedCompanies = [];
isSelected = false;
constructor(private modalController: ModalController, private loginSrvc: LoginService) {}
}
}
JSON
"blocked": [
{
"id":20,
"name":"X X",
"number":"06-12345678",
"address":"Address",
"alwaysBlocked":true,
"companies": [
"Company1","Company2","Company3"
]
}
]
"user": [
{
"id": 1,
"gender": "0",
"fullname": "X X",
"number": "06-12345678",
"mail": "[email protected]",
"password": "admin1",
"company": [
{
"company_id": 1,
"company_name": "Company1",
},
{
"company_id": 2,
"company_name": "Company2",
},
{
"company_id": 3,
"company_name": "Company3",
},
{
"company_id": 4,
"company_name": "Company4",
}
uj5u.com熱心網友回復：
我找到了更改 HTML 代碼的解決方案
<ion-select multiple="true" [(ngModel)]="selectedCompanies" class="selectModal" placeholder="Add one or more companies" text="Hello" okText="Ok" cancelText="Dismiss">
<ion-select-option selected="{{isSelected}}" *ngFor="let company of user.company; let i=index" value="{{company.company_name}}">{{company.company_name}}</ion-select-option>
</ion-select>
到：
<ion-select multiple="true" class="selectModal" placeholder="Add one or more activities" text="Hello" okText="Ok" cancelText="Dismiss" (ionChange)="activitySelect($event)">
<ion-select-option *ngFor="let activity of user.activity; let i=index" value="{{activity.activity_name}}">{{activity.activity_name}}</ion-select-option>
</ion-select>
我所做的更改是洗掉 [(ngModel)] 導致無法使用 selected 開始的原因。接下來我改變了
selected="{{isSelected}}"
到
[selected]="blocked.companies.includes(userCompany.company_name)"
這樣我回圈遍歷blocked.companies，如果它包含userCompany，它將回傳true并啟用selected。
uj5u.com熱心網友回復：
假設您默認選擇了 company1,2,3。在這種情況下，您應該只添加它們的值的陣列。
selectedCompanies:Array<string> = ['Company1', 'Company2', 'Company3']
uj5u.com熱心網友回復：
html檔案：
<ion-select multiple="true" [(ngModel)]="selectedCompanies" class="selectModal" placeholder="Add one or more companies" text="Hello" okText="Ok" cancelText="Dismiss">
<ion-select-option *ngFor="let company of filtredCompanies; let i=index" value="{{company}}">{{company}}</ion-select-option>
</ion-select>
.ts 檔案：
get filtredCompanies(){
if(!!this.user){
let blockedCompanies : Array<string> = this.yourJsonData.blocked.companies
let userCompanies:Array<string> = this.user.company
let filtredCompanies =[]
userCompanies.forEach((company:any)=>{
if(blockedCompanies.includes(company.company_name)){
filtredCompanies.push(company.company_name)
}
else{
//if You want reversed filter
//filtredCompanies.push(company.company_name)
}
})
return filtredCompanies;
}
return [];
}
我回家這個答案可以解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380702.html