typescript - Hvordan kan jeg sende foreldrenobjektet for en egenskap valgt i Angular Material Autocomplete?

Jeg jobber med Angular 4 Material, og spesifikt med Autocomplete-komponenten.

Min liste over alternativer filteredHomeTeams er av typen Observable< Team[ ] > og jeg bygger nedtrekksmenyen og valget ved å bruke en egenskap av et slikt objekt kalt teamName

Her er HTML-en:

<mat-form-field class="example-full-width">
            <input type="text" matInput placeholder="Local" [formControl]="HomeTeamCtrl" [matAutocomplete]="homeAuto">
            <mat-autocomplete #homeAuto="matAutocomplete" (optionSelected)="setHomeTeam()">
                    <mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" >
                        {{ team.teamName }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>

Som du kan se har jeg et arrangement kalt optionSelected som kaller en metode setHomeTeam()

Min Team-klasse er:

export class Team {
    teamName: string;
    teamSelfRef: string;
}

Hva jeg trenger å gjøre, og dette er sannsynligvis veldig grunnleggende for erfarne Angular-programmerere, er:

Jeg valgte team.teamName i rullegardinmenyen, og jeg har team.teamName i inndatafeltet. Hvordan kan jeg sende team.teamSelfRef fra det samme objektet som en parameter til "setHomeTeam()"?

Jeg trenger å bygge og velge objektet basert på navnet, men jeg trenger å aktivere logikk med en annen egenskap.

Det vil også fungere hvis jeg kan sende hele objektet som parameter til metoden "setHomeTeam()"

Svar #1

Alic W har rett, noe som for øvrig forklares i dokumentasjonen: Sette separate kontroll- og visningsverdier Tillegget til Alic Ws kode er hvordan du får verdien du ønsker.

Så som Alic W sa, binder du objektet med value:

[value]="team"

og legg til displayWith:

<mat-autocomplete #homeAuto="matAutocomplete" 
                  [displayWith]="displayFn"  
                  (optionSelected)="setHomeTeam()">

Koden displayFn:

displayFn(team: Team): string {
    return team? team.teamName: team;
}

og deretter kan du få tilgang til hele objektet (inkludert teamSelfRef) egenskapen fra din skjema kontroll HomeTeamCtrl:

setHomeTeam() {
  console.log(this.myControl.value.teamSelfRef)
}

Her er en demo fra dokumentasjonen og deres variabler: https://plnkr.co/edit/zlKFIytpI6pokfZi3ofm?p=preview

Svar #2

Hvorfor setter du ikke hver alternativverdi som et team i stedet:

[value]="team"

Og så kan du sende hele team-objektet. Du må definere en visningsfunksjon for autoutfylling, for å vise teamnavnet i stedet for team-objektet:

<mat-autocomplete [displayWith]="displayFn" ...

Og i klassen din:

displayFn(team: Team): string {
    return team? team.teamName: team;
}

Relaterte artikler