单击“离子选择”时，“离子选择”选项隐藏在视图下

分类：编程问答

如何解决单击“离子选择”时，“离子选择”选项隐藏在视图下

我在家庭组件中有一个工具栏，我可以从其中使用弹出框导航到“ gestionUtilisatuerComponent”，在“ gestionUtilisatuerComponent”视图中，单击该按钮时似乎有一个离子选择，但似乎没有单击该弹出窗口，并且当我返回上一个视图时，我会看到带有选择选项的弹出窗口。

gestion-utilisateur.html 

<ion-header>
  <ion-toolbar color="warning">
    <ion-title mode="ios">{{toolbarTitle}}</ion-title>

    <ion-buttons slot="start">
      <ion-button slot="start" (click)="goBack()" fill="clear" size="large" slot="icon-only">
        <ion-icon class="customIconToolbar" color="light" name="arrow-back-circle-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <form [formGroup]="addForm">
    <ion-item>
      <ion-label>Type unité</ion-label>
      <ion-select name="selectedRegion" (ionChange)="getSelectedTypeUnite($event)">
        <ion-select-option *ngFor="let type of typesUnites" [value]="type">{{type.name}}</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>Régions</ion-label>
      <ion-select name="selectedRegion" (ionChange)="getSelectedRegion($event)">
        <ion-select-option *ngFor="let rg of regions " [value]="rg">{{rg.region}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Unités</ion-label>
      <ion-select name="selectedSousRegion" (ionChange)="getSelectedUnite($event)">
        <ion-select-option *ngFor="let u of unites " [value]="u">{{u.cUnite}}</ion-select-option>
      </ion-select>
    </ion-item>
    <div id="divInfoUser">
      <ion-item>
        <ion-label position="floating">First Name</ion-label>
        <ion-input formControlName='fName' requiered name="fName"
          [ngClass]="{ 'is-invalid': submitted && addForm.get('fName').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted && addForm.get('fName').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('fName').errors.required">username is required</div>
      </div>
      <ion-item>
        <ion-label position="floating">Last Name</ion-label>
        <ion-input formControlName='lName' requiered name="lName"
          [ngClass]="{ 'is-invalid': submitted && addForm.get('lName').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted && addForm.get('lName').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('lName').errors.required">username is required</div>
      </div>
      <ion-item>
        <ion-label position="floating">Matricule</ion-label>
        <ion-input formControlName='matricule' requiered name="matricule"
          [ngClass]="{ 'is-invalid': submitted && addForm.get('matricule').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted && addForm.get('matricule').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('matricule').errors.required">username is required</div>
      </div>


      <ion-item>
        <ion-label position="floating">Email</ion-label>
        <ion-input formControlName='email' requiered type="email" name="email"
          [ngClass]="{ 'is-invalid': submitted && addForm.get('email').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted && addForm.get('email').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('email').errors.required">username is required</div>
      </div>

      <ion-item>
        <ion-label position="floating">Téléphone</ion-label>
        <ion-input formControlName='telephone' requiered type="telephone" name="telephone"
          [ngClass]="{ 'is-invalid': submitted && addForm.get('telephone').errors }"></ion-input>
      </ion-item>
      <div *ngIf="submitted && addForm.get('telephone').errors" class="invalid-feedback">
        <div *ngIf="addForm.get('telephone').errors.required">username is required</div>
      </div>



      <ion-item>
        <ion-label>Profils</ion-label>
        <ion-select name="selectedSousRegion" (ionChange)="getSelectedProfil($event)">
          <ion-select-option *ngFor="let p of profils " [value]="p">{{p.profil}}</ion-select-option>
        </ion-select>
      </ion-item>
    </div>
    <ion-item id="agent">
      <ion-label>Agents</ion-label>
      <ion-select name="selectedSousRegion" (ionChange)="getSelectedAgents($event)">
        <ion-select-option *ngFor="let a of agents " [value]="a">{{a.matricule}}--{{a.nom}}--{{a.prenom}}
        </ion-select-option>
      </ion-select>
    </ion-item>
    <ion-button id="ajout" (click)="submit()" type="submit" expand="full" color="success">Ajouter</ion-button>
    <ion-button id="block" (click)="block()" type="submit" expand="full" color="danger">bloqué</ion-button>

  </form>
</ion-content>

GestionUtilisateurPage.ts 

import { Component,OnInit,Inject } from '@angular/core';
import { Utilisateur } from '../models/UtilisateurModel';
import { UtilisateurService } from '../service/utilisateur.service';
import { ProfilModel } from '../models/profilModel';
import { NgForm,FormBuilder,FormGroup,Validators,AbstractControl } from '@angular/forms';
import { RegionModel } from '../models/RegionModel';
import { UniteModel } from '../models/UniteModel';
import { ToastController,AlertController } from '@ionic/angular';
import { async } from 'rxjs/internal/scheduler/async';
import { Location,DOCUMENT } from '@angular/common';
import { IonicToastService } from '../service/ionic-toast.service';
import { resolve } from 'url';
import { promise } from 'protractor';
import { ActivatedRoute,Router } from '@angular/router';

@Component({
  selector: 'app-gestion-utilisateur',templateUrl: './gestion-utilisateur.page.html',styleUrls: ['./gestion-utilisateur.page.scss'],})
export class GestionUtilisateurPage implements OnInit {

  addForm: FormGroup;
  profils: ProfilModel[]
  regions: RegionModel[]
  unites: UniteModel[]
  selectedRegion: RegionModel
  selectedProfil: ProfilModel
  selectedTypeUnite: string
  selectedUnite: UniteModel
  selectedAgent: Utilisateur
  submitted: boolean = false
  operation: string
  hideSubmit: boolean = false
  hideDivLabels: boolean = false
  hideButtonBlock: boolean = true
  toolbarTitle: string
  agents: Utilisateur[]
  //typesUnite=["ULS","UGS","CSC"]
  typesUnites = [{ name: "ULS" },{ name: "UGS" },{ name: "CSC" }]


  constructor(private formBuilder: FormBuilder,private utilisateurService: UtilisateurService,private location: Location,private router: Router,public alertController: AlertController,private toastService: IonicToastService,private route: ActivatedRoute,@Inject(DOCUMENT) document) {
    this.route.queryParams.subscribe(params => {
      this.operation = params["operation"]
      if (this.operation === "block") {
        document.getElementById('divInfoUser').style.display = 'none';
        document.getElementById('ajout').style.display = 'none';
        document.getElementById('agent').style.display = 'inherit';
        document.getElementById('block').style.display = 'inherit';
        this.toolbarTitle = "Bloqué Utilisateur"
      }
      else if (this.operation === "ajout") {
        document.getElementById('ajout').style.display = 'inherit';
        document.getElementById('block').style.display = 'none';
        document.getElementById('divInfoUser').style.display = 'inherit';
        document.getElementById('agent').style.display = 'none';
        this.toolbarTitle = "Ajouter Utilisateur"
      }
    });

  }

  ngOnInit() {
    this.getListProfils()
    this.getListRegions()
    //  this.getListUnites()
    this.addForm = this.formBuilder.group({
      fName: (['',[Validators.required,this.noWhitespaceValidator]]),lName: (['',matricule: (['',telephone: (['',this.noWhitespaceValidator,Validators.pattern("[0-9 ]{8}")]]),email: (['',Validators.email]])
    })
  }
  getListProfils() {
    return this.utilisateurService.getProfiles().subscribe(
      data => {
      this.profils = data
        console.log(this.profils)
      })
  }
  getListRegions() {
    return this.utilisateurService.getRegions().subscribe(
      data => {
      this.regions = data
        console.log(this.regions)
      })
  }

  getSelectedTypeUnite(type) {
    console.log(type)
    return this.selectedTypeUnite = type.detail.value.name
  }
  getSelectedRegion(region) {

    this.selectedRegion = region.detail.value
    console.log(region)
    return this.utilisateurService.getUnites(this.selectedRegion.cRegion,this.selectedTypeUnite).subscribe(
      data => {
      this.unites = data
        console.log(this.unites)
      })
  }

  getSelectedUnite(unite) {
    console.log(unite.detail.value)
    this.selectedUnite = unite.detail.value
    console.log(this.selectedUnite)

    return this.utilisateurService.getUsers(this.selectedRegion.cRegion,this.selectedUnite.cUnite).subscribe(
      data => {
      this.agents = data
        console.log(this.agents)

      })
  }
  getSelectedProfil(p) {
    return this.selectedProfil = p.detail.value
  }
  get formValidation() {
    return this.addForm.controls;
  }
  async createAlert(msg: string) {
    const alert = await this.alertController.create({


      header: "Erreur",message: msg,buttons: ['OK'],});
    await alert.present()

    console.log("not ok")
  }


  submit(form: NgForm) {

    const user = new Utilisateur()
    this.submitted = true;
    if (this.addForm.invalid) {
      return this.createAlert("Veuillez vérifier les données entrées !!")
    }
    user.nom = this.formValidation.fName.value
    user.prenom = this.formValidation.lName.value
    user.matricule = this.formValidation.matricule.value
    user.login = this.formValidation.matricule.value
    user.motPasse = this.formValidation.matricule.value
    user.email = this.formValidation.email.value
    user.tel = this.formValidation.telephone.value
    user.cRegion = this.selectedRegion.cRegion
    user.cTypeUnite = this.selectedTypeUnite
    user.cUnite = this.selectedUnite.cUnite
    user.idProfil = this.selectedProfil.idProfil
    this.utilisateurService.ajouterUtilisateur(user).subscribe(response => {
      // prints 200

      this.toastService.showToast("utilisateur crée")
      this.router.navigate(["home"])
      console.log(response.status);
    },(error) => {
        // prints 403
        this.createAlert("Matricule affécté !!")


        console.log("not ok")
        console.log(error.status);
        // prints Permission denied
        console.log(error.error);

      });
  }


  public noWhitespaceValidator(control: AbstractControl) {
    if (control && control.value && !control.value.replace(/\s/g,'').length) {
      control.setValue('');
    }
    return null;
  }


  goBack() {
    this.location.back()
  }


  getSelectedAgents(p) {
    return this.selectedAgent = p.detail.value
  }

  block(form: NgForm) {

    let user = new Utilisateur()
    this.submitted = true;

    user = this.selectedAgent
    this.utilisateurService.blockUtilisateur(user).subscribe(response => {
      // prints 200

      this.toastService.showToast("utilisateur bloqué")
      console.log(response.status);
      this.router.navigate(["home"])
    },(error) => {
        // prints 403
        this.createAlert(error.error.message)


        console.log("not ok")
        console.log(error.status);
        // prints Permission denied
        console.log(error.error);

      });
  }



}

Home.html 

<ion-app>

  <ion-menu contentId="my-content" class="my-custom-menu">
    <ion-header>
      <ion-toolbar color="dark">
        <ion-title mode="ios">
          <ion-label class="ion-text-center">
            <b>Menu</b>
          </ion-label>
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div *ngFor="let menu of typesOt let i=index">
        <ion-menu-toggle auto-hide="true">
          <ion-item button *ngIf="!(menu.cTypeOt==3);" (click)="Goto(menu)" color="light" detail="true" lines="full"
            type="button" routerLinkActive="active">
            <!-- <ion-icon slot="start" name="{{menu.icon}}"></ion-icon>-->
            <ion-label class="my-label">
              <font size="2">{{menu.typeOt}}</font>
            </ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-item button *ngIf="menu.cTypeOt==3" (click)="menu.open =!menu.open" color="light" detail="false"
          lines="full" [class.active-parent]="menu.open">
          <ion-icon color="medium" class="customIconToolbar" slot="end" name="chevron-down-circle-outline"
            *ngIf="!menu.open"></ion-icon>
          <ion-icon color="medium" class="customIconToolbar" slot="end" name="chevron-up-circle-outline"
            *ngIf="menu.open"></ion-icon>

          <ion-label class="my-label">
            <font size="2">{{menu.typeOt}}</font>
          </ion-label>
        </ion-item>
        <ion-list *ngIf="menu.open">

          <ion-menu-toggle auto-hide="true">
            <ion-item button (click)="Goto(menu)" color="light" detail="true" lines="full" type="button">

              <ion-label class="my-label">
                <font size="2">Consulter Ots Raccordement</font>
              </ion-label>
            </ion-item>
            <ion-item [hidden]="hideAffectationEquipe" button (click)="GotoRaccordementAffecterEquipe(menu)"
              color="light" detail="true" lines="full" type="button">

              <ion-label class="my-label">
                <font size="2">Affectation d'équipes</font>
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

      </div>

      <ion-item [hidden]="hideAjouterEquipe" button routerLink="/ajouterequipe" color="light" detail="true" lines="full"
        type="button">

        <ion-label class="my-label">
          <font size="2"> Ajouter Equipe </font>
        </ion-label>
      </ion-item>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="my-content"></ion-router-outlet>
  <ion-content>
    HAHAHAHHAHAHAHAHA
  </ion-content>
  <ion-header>
    <ion-toolbar id="homeToolbar" color="{{tbColor}}">
      <ion-title mode="ios"> {{tbTitle}}</ion-title>
      <ion-buttons slot="start">
        <ion-menu-button autoHide="false"> </ion-menu-button>
        <ion-back-button auto-hide="false"> </ion-back-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button routerLink="/profil" fill="clear" size="large" slot="icon-only">
          <ion-icon class="customIconToolbar" color="light" name="person-circle-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-buttons [hidden]="hideOptions" slot="end">
        <ion-button color="danger" (click)="CreatePopover($event)" fill="clear" size="large" slot="icon-only">
          <ion-icon class="customIconToolbar" color="light" name="ellipsis-vertical-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

</ion-app>

the view after click ion-select

navigating to the previous view

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot