离子选择循环中的选定值
Posted
技术标签:
【中文标题】离子选择循环中的选定值【英文标题】:ion-select selected value in loop 【发布时间】:2022-01-12 14:17:08 【问题描述】:所以我用 IONIC 制作了一个应用程序。我使用标签 ion-select 和 ion-select-option 来选择一个或多个选项并将它们发送到打字稿(到目前为止有效)。
现在我希望有人能够编辑他们的选项。这意味着一些 ion-select-option 应该是 [selected](选中为 true)。
有人知道这是否可能吗?我为此使用了 2 个不同的数组。
user.companies(用户添加到应用程序的所有公司)
blocked.companies(所有被阻止的公司都已添加到他们被阻止的联系人中) 我正在使用 user.companies 显示所有 ion-select-option 选项(要选择的公司)
如果blocked.companies数组中存在ion-select-option值,则应该选择
这是我的代码。如果需要更多说明,请告诉我,我会提供。谢谢
<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": "user@company.com",
"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",
【问题讨论】:
【参考方案1】:我找到了更改 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)"
这样我会遍历被阻止的.companies,如果它包含 userCompany,它将返回 true 并启用选中。
【讨论】:
你得到了我的一票,因为你完全理解他的问题。【参考方案2】:假设您默认选择了 company1,2,3。 在这种情况下,您应该只添加它们的值的数组。
selectedCompanies:Array<string> = ['Company1', 'Company2', 'Company3']
【讨论】:
在我的离子代码上检查后,这个答案将解决您的问题。 不。我有多个用户,他们有多个被屏蔽的号码和公司。每个被屏蔽的号码都会让其他公司屏蔽他们。有的没有,有的多,有的全部。【参考方案3】: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 [];
这个答案可以解决你的问题。
【讨论】:
以上是关于离子选择循环中的选定值的主要内容,如果未能解决你的问题,请参考以下文章
Thymeleaf (th:each + th:selected) :从每个循环访问选定属性中的变量