离子选择循环中的选定值答案

【问题标题】：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值，则应该选择

这是我的代码。如果需要更多说明，请告诉我，我会提供。谢谢

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": "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",
        }

【问题讨论】：

标签： html arrays typescript ionic-framework

【解决方案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 [];


}

这个答案可以解决你的问题。

【讨论】：