0
votes

Passer le champ sélectionné dans un tapis-select à TS

J'ai donc une sélection de tapis qui est remplie par un tableau dans le modèle ( uniqueBusinessUnits ) et j'essaie de consigner l'unité commerciale sélectionnée lorsqu'elle est modifiée via une liaison bidirectionnelle à selectedUniqueBusinessUnit . Cependant, il semble enregistrer non défini .

Le html

   export class LandingPageComponent {
     uniqueBusinessUnits: Object [];
     selectedUniqueBusinessUnit: Object [];
     eventBusinessUnitChange(s, event) {
         console.log(this.selectedUniqueBusinessUnit);
     }
   }

Le ts strong >

   <mat-form-field >
      <mat-select  placeholder="Filter By BU"
      ([value])="selectedUniqueBusinessUnit"
      (selectionChange)="uniqueBusinessUnit=$event.value;eventBusinessUnitChange('change', $event)">
      <mat-option *ngFor="let uniqueBusinessUnit of uniqueBusinessUnits" [value]="uniqueBusinessUnit.business_Unit_Code">
          {{ uniqueBusinessUnit.business_Unit_Code }}
      </mat-option>
      </mat-select>
   </mat-form-field>

typescript angular angular-material

2 commentaires

Avez-vous essayé d'utiliser [(ngModel)]?

C'est [(value)] et non ([value]) . De plus, selectedUniqueBusinessUnit doit être Object et non Object [] et cette allocation dans selectionChange ne fait rien simplement utiliser: (selectionChange) = "eventBusinessUnitChange ('change', $ event.value)" .

3 Réponses :

0
votes

En regardant votre modèle, le problème peut être:

(selectionChange)="uniqueBusinessUnit...

Vous devriez plutôt faire:

(selectionChange)="selectedUniqueBusinessUnit...

Vous essayez d'attribuer la valeur au mauvais attribut (oh, uniqueBusinessUnit n'existe même pas à ce point / état de votre application)! Lorsque l'utilisateur clique sur l'une des valeurs, vous effectuez un console.log () sur un attribut selectedUniqueBusinessUnit qui n'est toujours pas défini (car vous n'avez jamais affecté une valeur techniquement).

Quelques suggestions

Dans votre composant (.ts), je pense que selectedUniqueBusinessUnit ne devrait pas être un tableau sachant qu'il va contenir une valeur unique.

Et si vous avez des modèles (comme vous l'avez dit), vous devriez les utiliser. Pourquoi Object [] quand vous pouvez utiliser TheModelYouCreated []?

eventBusinessUnitChange ('change', event) : les deux arguments sont en quelque sorte inutiles ici puisque vous affectez directement le $ event.value dans le template (.html).

0 commentaires

0
votes

@Daniel Haughton .. essayez ceci une fois

<mat-select  placeholder="Filter By BU" [(ngModel)]="selectedUniqueBusinessUnit" (ngModelChange)="eventBusinessUnitChange('change', $event)" >
    <mat-option *ngFor="let uniqueBusinessUnit of uniqueBusinessUnits" [value]="uniqueBusinessUnit.business_Unit_Code">
          {{ uniqueBusinessUnit.business_Unit_Code }}
    </mat-option>
</mat-select>

utilisez ngModel pour obtenir l'option sélectionnée. pour plus d'informations, jetez un œil ici mat-select .

0 commentaires

0
votes

Le HTML doit être comme celui-ci Daniel:

   export class LandingPageComponent {
     uniqueBusinessUnits: Object [];
     selectedUniqueBusinessUnit: Object [];
     eventBusinessUnitChange(value) {
         console.log(value);
     }

et vous recevrez directement la valeur (business_Unit_Code): TS p>

<mat-form-field >
      <mat-select  placeholder="Filter By BU"
      (selectionChange)="eventBusinessUnitChange($event.value)">
      <mat-option *ngFor="let uniqueBusinessUnit of uniqueBusinessUnits" [value]="uniqueBusinessUnit.business_Unit_Code">
          {{ uniqueBusinessUnit.business_Unit_Code }}
      </mat-option>
      </mat-select>
   </mat-form-field>

}

0 commentaires