J'ai une liste déroulante de sélection et j'itère les options dans une liste. J'essaie de définir comme sélectionné une option distincte (par défaut), au cas où l'utilisateur ne sélectionne pas de valeur.
Voici comment j'essaie de mettre en œuvre cela:
<option [value]="0" selected="1==1">No Default Layout</option>
5 Réponses :
Essayez ceci , cela devrait fonctionner.
L'attribut sélectionné n'aidera pas beaucoup si vous utilisez ngModel, vous pouvez le faire facilement en définissant la valeur par défaut du modèle défini.
public book: any = {
pageLayout: 1
}
public availableLayouts: any = [
{
name: "One",
id: 1
},
{
name: "Two",
id: 2
}
]
Ensuite, à l'intérieur de component.ts
public book: any = {
pageLayout: ''
}
Modifier
Pour définir l'option par défaut, nous devons définir la valeur de pageLayout sur id au lieu d'une chaîne vide.
<select [(ngModel)]="book.pageLayout">
<option value="">No Default Layout</option>
<option *ngFor="let l of availableLayouts" [value]="l.id">
{{l?.name}}
</option>
</select>
C'est en effet une option. Pas celui que j'ai finalement utilisé, mais merci de votre aide.
Que devrait être la mise en page par défaut? Objet contenant le paramètre id ou seulement id? Pourriez-vous s'il vous plaît modifier votre exemple avec une valeur par défaut significative?
@shemekh doit être id pour définir la valeur par défaut.
@GeorgeGeorge qu'avez-vous utilisé, car j'utilise le mappage de services
Vous pouvez essayer ceci
ng-selected="selected"
Ceci est pour l'ancienne version angulaire 1.
Vous pouvez utiliser FormControl depuis Angular Reactive Form, c'est facile.
Angular Docs À propos du formulaire réactif
Vous devez importer le formulaire réactif dans votre module
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
name = new FormControl(null);
}
///(you can pass any to new FormControl(0), or new FormControl(false), new FormControl('string'))
Ensuite, vous devez créer FormControl dans votre component.ts
<select [formControl]="name">
<option value="null">No Default Layout</option>
<option *ngFor="let l of availableLayouts" [value]="l.id">
{{l?.name}}
</option>
</select>
Après cela, vous devez définir le contrôle de formulaire sur votre élément select en html
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
name = new FormControl('');
}
Si vous avez besoin de la valeur par défaut de select, vous devez créer formControl avec la valeur par exemple:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }
Dans ce cas, la valeur par défaut de select sera null.Et les options avec la valeur null seront sélectionnées dans dropdawn.
In vous cassez new FormControl (0) comme valeur par défaut.
Aussi 0 n'est pas égal à nul; 0! == nul;
ithink, vous pouvez essayer ceci
essayez le code:
<select class="form-control" id="marasemaat" style="margin-top: 10%;font-size: 13px;" [(ngModel)]="fullNamePresentors" [formControl]="stateControl"
(change)="onSelect($event.target.value)">
<option *ngFor="let char of programInfo1;let i = index;" onclick="currentSlide(9,false)" value={{char.id}}>{{char.title + " "}} ----> {{char.name + " "+ char.family }} ---- > {{(char.time.split('T', 2)[1]).split(':',2)}}</option>
</select>
et:
this.fullNamePresentors = this.programInfo1.filter(item => item.time > this.fulltextDate);