1
votes

Impossible de sélectionner la valeur dans l'option (liste déroulante angulaire.)

J'ai cherché partout. Ce que j'ai obtenu des autres réponses est que Je dois utiliser [selected] si je veux sélectionner une option particulière.

Cela ne semble pas fonctionner. Pourquoi? Voici ce que j'ai:

<ngx-datatable-column name="status" prop="operationStatus" [flexGrow]="1">
    <ng-template let-value="value2" let-row="row" let-rowIndex="rowIndex" gx-datatable-cell-template>
          <select class="geraeteStatus" [(ngModel)]="selectableGerateStatus">
             <option *ngFor="let e of selectableGerateStatus" [ngValue]="e" 
                 [selected]="e.id === value2">
                {{e.id}}
             </option>
          </select>
   </ng-template>
</ngx-datatable-column>

Je suis sûr que la valeur de e.id est égale à celle de value2 à au moins une fois par itération. Cependant, cela ne fonctionne tout simplement pas. En fait, je peux mettre tout ce que je veux (e.id === 2, ou même «vrai») dans [selected] cela n'a aucun effet. Je n'ai aucune idée de ce qui me manque. Toute réponse est très appréciée.

angular select html-select

2 commentaires

si vous utilisez [(ngModel)], vous ne devez PAS utiliser [selected]. Le problème est que vous utilisez [ngValue] = "e". Ainsi, la variable "selectableGenerateStatus", est un objet - vous avez vraiment besoin que ce soit le même objet. Utilisez [ngValue] = "e.id" pour travailler

OK j'ai compris. J'ai supprimé "sélectionné". J'ai changé pour ce qui suit: . Mais cela ne fonctionne toujours pas

3 Réponses :

0
votes

Il n’est pas nécessaire d’utiliser [selected dans vos options

il suffit de faire quelques changements comme ci-dessous

selectedStatus: string;

onChange(status: string) {
   this.selectedStatus = status;
}

mais ici vous devez faire correspondre ngValue avec votre ngModel alors seulement il le fera être sélectionné.

<select class="geraeteStatus" (change)="onChange($event)" [(ngModel)]="selectedStatus">
   <option *ngFor="let e of selectableGerateStatus" [ngValue]="e.id">
     {{e.id}}
   </option>
</select>

Pour plus d'informations sur les options de sélection cliquez ici

1 commentaires

merci gnaesh045. Malheureusement, cela ne fonctionne toujours pas.

0
votes

Liez l'option avec une valeur au lieu de ngValue comme ci-dessous.

<select class="my-status" [(ngModel)]="myModel.status">
         <option [ngValue]="null" selected disabled> Select Status </option>
         <option *ngFor="let e of selectableGerateStatus" [value]="e">
            {{e.id}}
         </option>
</select>

0 commentaires

0
votes

Je présente comment j'ai résolu le problème. Notez que je suis assez nouveau en angular, et mon approche pourrait être rudimentaire. Je tiens également à rendre hommage à @Eliseo qui a souligné le fait que ngModel et selected ne doivent pas être utilisés ensemble . C'est pourquoi je me suis débarrassé de l'ancien et utilisé uniquement sélectionné:

component.html

    this.selectableGerateStatus = [
  {
    id: 0,
    label: BaseDataComponent.NEW
  }, {
    id: 1,
    label: BaseDataComponent.ACTIVE
  }, {
    id: 2,
    label: BaseDataComponent.DEINSTALLED
  }
]

et le fichier .ts:

 <select class="geraeteStatus" (change)="changeGaerateStatus($event, rowIndex)">
          <option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
               {{e.label}}
            </option>
 </select>

0 commentaires