Ionique:
Vous pouvez voir sur le gif ci-dessous qu'après avoir cliqué sur «Coletor», le «Linha 02» est déjà sélectionné bien qu'il n'ait pas été montré comme sélectionné avant de cliquer. Cela fonctionne correctement avec le champ «Permissà £ o» cependant:
https://i.stack.imgur.com/tjRjy.gif
config-add-user.page.html
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' : "",
});
}
}
config-add-user.page.ts
<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>
3 Réponses :
Cela peut être réalisé comme ça
.html
export class YourPage
{
responseData : any;
selectedValue: any;
constructor(public navCtrl: NavController) {
}
setValue() {
console.log('languageSelected',this.selectedValue);
}
}
.ts
<ion-item>
<ion-label>Choose Language</ion-label>
<ion-select [(ngModel)]="selectedValue" (ionChange)='setValue()'>
<ion-option value="english">English</ion-option>
<ion-option value="sinhala">Sinhala</ion-option>
</ion-select>
</ion-item>
Bonjour, @Chanaka! Merci de votre aide! Il semble que ngModel est obsolète lorsque j'essaye de l'exécuter. Je l'utilisais avec Ionic 3 et cela fonctionnait correctement, maintenant je migre vers Ionic 5 et il affiche un message d'avertissement.
Je perdais mon temps depuis longtemps à essayer de corriger la couleur des icônes de contour ionique et finalement je trouve le problème. Vous devez remplacer cette ligne dans votre tête:
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.js"></script>
Pour celui-ci:
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
Mais si vous installez @ ionic / cli, vous n'avez pas besoin de mettre cette ligne dans votre tête.
Vous pouvez le faire dans IONIC 5 comme ça
getSelectedCategory(mySelect) {
console.log(mySelect);
}
Dans le fichier ts
<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>
J'obtiens la valeur de l'option sélectionnée et cela fonctionne bien avec moi.
<ion-select-option [value]="item"Bonjour, @AluanHaddad! J'ai déjà essayé cela, malheureusement, cela montre le même problème.