typescript - Hent valgt verdi fra ng-select - Angular8

Jeg er nybegynner med Angular 8.
Jeg laget følgende rullegardinmeny i en komponent, som fungerer veldig godt for meg:

<ng-select class="w-25 p-3" placeholder="{{'author' | translate}}" [clearable]="false" [searchable]="false">
        <ng-option>{{'author' | translate}}</ng-option>
        <ng-option>{{'title' | translate}}</ng-option>
        <ng-option>{{'date' | translate}}</ng-option>
</ng-select>

Nå vil jeg gjerne vite hvordan jeg kan hente det valgte elementet i ts-filen til den samme komponenten.
Takk på forhånd.

Svar #1

Du kan bruke change-hendelsen for å fange den valgte verdien.

<!-- Template -->
<ng-select (change)="changeFn" class="w-25 p-3" placeholder="{{'author' | translate}}" [clearable]="false" [searchable]="false">
        <ng-option>{{'author' | translate}}</ng-option>
        <ng-option>{{'title' | translate}}</ng-option>
        <ng-option>{{'date' | translate}}</ng-option>
</ng-select>

<!-- Component ts file -->

changeFn(val) {
     console.log(val);
}

Svar #2

Legg til [(ngModel)]-attributtet til attributtene til ng-select, og send verdien dens til utløseren.

<ng-select (change)="changeFn(selection)" [(ngModel)]="selection" class="w-25 p-3" placeholder="{{'author' | translate}}" [clearable]="false" [searchable]="false">
        <ng-option>{{'author' | translate}}</ng-option>
        <ng-option>{{'title' | translate}}</ng-option>
        <ng-option>{{'date' | translate}}</ng-option>
</ng-select>

Så i ts-filen:

export class myComponent {

    public val: string;

    changeFn(val) {
        console.log("Dropdown selection:", val);
    }
}

Relaterte artikler