时间戳

首页 > 解决方案 > Ionic 5/Angular - 离子选择不显示所选值

angular - Ionic 5/Angular - 离子选择不显示所选值

问题描述

离子：

您可以在下面的 gif 图中看到，单击“Coletor”后，“Linha 02”已被选中，尽管在单击之前它并未显示为选中状态。但是，它可以在“Permissão”字段中正常工作：

https://i.stack.imgur.com/tjRjy.gif

配置添加用户.page.html

<ion-header>

  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="closeModal()">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title><b>Usuário</b></ion-title>
  </ion-toolbar>

</ion-header>

<ion-content class="ion-padding">

  <form [formGroup]="addUserGroup">
    <ion-list inset ion-no-border>

      <ion-item>
        <ion-label color="medium">Usuário:</ion-label>
        <ion-input class="ion-text-end" type="text" name="username" formControlName="username" value="{{ username }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Password:</ion-label>
        <ion-input class="ion-text-end" type="password" name="password" formControlName="password" value="{{ password }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Name:</ion-label>
        <ion-input class="ion-text-end" type="text" name="name" formControlName="name" value="{{ name }}"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Permissão:</ion-label>
        <ion-select class="ion-text-end" name="permission" formControlName="permission" value="{{ selectPermission }}">
            <ion-select-option value="1">Usuário</ion-select-option>
            <ion-select-option value="2">Administrador</ion-select-option>
        </ion-select>
        <ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
      </ion-item>

      <br>

      <ion-item>
        <ion-label color="medium">Coletor:</ion-label>
        <ion-select class="ion-text-end" multiple="true" name="idLine" formControlName="idLine" [(value)]="selectLine">
          <ion-select-option *ngFor="let item of linesList" value="{{item.id}}">
            {{ item.name }}
          </ion-select-option>
        </ion-select>
        <ion-icon name="chevron-forward-outline" color="primary" item-end></ion-icon>
      </ion-item>

      <br>

    </ion-list>

    <ion-row>
      <ion-col>
        <ion-button [disabled]="addUserGroup.invalid" (click)="postUser()" type="submit" expand="block" size="large">SALVAR</ion-button>
      </ion-col>
    </ion-row>

  </form>

</ion-content>

配置添加用户.page.ts

import { UserService } from '../api/user.service';
import { Component, Input } from '@angular/core';
import { Validators, FormBuilder, FormControl } from '@angular/forms';
import { AlertController, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-config-add-user',
  templateUrl: './config-add-user.page.html',
  styleUrls: ['./config-add-user.page.scss'],
})

export class ConfigAddUserPage {

  /* DATA VARIABLES */
  addUserGroup: any = {};
  linesList: Array<any>;

  /* EDIT VARIABLES */
  selectLine: Array<any>;
  selectPermission: string;

  // Data passed in by componentProps
  @Input() modal: any;
  @Input() edit: string;
  @Input() token: string;
  @Input() id: string;
  @Input() idLine: Array<any>;
  @Input() clientId: string;
  @Input() username: string;
  @Input() password: string;
  @Input() name: string;
  @Input() permission: string;

  constructor(
    public service : UserService,
    public alertCtrl: AlertController,
    public formBuilder : FormBuilder,
    public modalController: ModalController,
  ) {

      this.addUserGroup = this.formBuilder.group({
        token: new FormControl('xxxx', Validators.required),
        dns: new FormControl(this.service.getDns(), Validators.required),
        user: new FormControl(this.service.getUser(), Validators.required),
        pass: new FormControl(this.service.getPass(), Validators.required),
        clientId: new FormControl(this.service.getClientId(), Validators.required),
        id: new FormControl(this.id),
        username: new FormControl('', Validators.required),
        password: new FormControl('', Validators.required),
        name: new FormControl('', Validators.required),
        permission: new FormControl('', Validators.required),
        idLine: new FormControl('', Validators.required)
      });
  }

  ionViewDidEnter() {
    this.getProductionLines();
    this.selectPermission = this.permission;
    this.selectLine = this.idLine;

    // Removing Ion Select Icons
    const ionChange = document.querySelectorAll('ion-select');
    ionChange.forEach((sel) => {
      sel.shadowRoot.querySelectorAll('.select-icon-inner')
        .forEach((elem) => {
          elem.setAttribute('style', 'display: none;');
        });
    });
  }

  postUser() {
    if (this.edit == "true") {
      this.service.updateDataUser(this.addUserGroup.value)
        .subscribe(
          data=>{
            console.log(data.message);
        }, 
          err=>console.log(err)
      );
      this.modal.dismiss();
    } 
    if (this.edit == "false") {
      this.service.postDataUser(this.addUserGroup.value)
        .subscribe(
          data=>{
            if (data.search === false) {
              console.log(data.message);
              this.modal.dismiss();
            } else {
              console.log(data.message);
              this.postAlert();
            }
        },
          err=>console.log(err)
      );
      this.modal.dismiss();
    }
  }

  async postAlert() {
    const alert = await this.alertCtrl.create({
      header: 'Usuário Repetido',
      message: 'Tente outro username...',
      buttons: ['OK']
    });
    await alert.present();
  }

  getProductionLines() {
    this.service.getDataProductionLines().subscribe(
      data => this.linesList = data,
      err => console.log(err)
    );
  }

  closeModal() {
    this.modal.dismiss({
      'edit' : "",
      'token' : "", 
      'id' : "", 
      'idLine' : "", 
      'clientId' : "", 
      'username' : "", 
      'password' : "",
      'name' : "" ,
      'permission' : "",
    });
  }

}

标签： angularionic-framework

解决方案

您可以在 IONIC 5 中执行此操作 像这样

 <ion-select placeholder="Select One" (ionChange)="getSelectedCategory(mySelect)" [(ngModel)]="mySelect">
  <ion-select-option  *ngFor="let category of categories" value="{{ category.c_id }}" >{{ category.c_name }}</ion-select-option>
</ion-select>

在 ts 文件中

getSelectedCategory(mySelect) {
  console.log(mySelect);
}

我得到了所选选项的价值，并且它对我来说工作正常。

推荐阅读