typescript - Angular Material otomatik tamamlama'dan bir değeri bileşenimdeki bir değişkene nasıl atayabilirim?

API'e bir POST oluşturmak için bir form yapıyorum. Angular Material 4 kullanıyorum ve Material Design tarafından sağlanan Autocomplete bileşenini kullanıyorum.

İşte benim HTML Bileşenim:

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

Bu iyi çalışıyor, yazabiliyorum ve sonuçları filtreleyebiliyorum, sonra listeden öğeyi seçersem, giriş alanına giriyor ve orada kalıyor.

Gördüğünüz gibi, Team[] dizisinden gelen Team nesnesinin bir özelliğine göre listeyi filtreliyorum.

Bu nesnenin elbette başka değerleri de var ve yapmam gereken şey şu: Otomatik tamamlama seçeneklerimden bir değer seçtiğimde, aynı nesneyi kullanarak bir yöntemi çağırmalı, bir özellikteki bir dizeyi alıp çözümlemeli ve bunu bir değişkene atamalı.

İşte benim takım sınıfım:

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

Bu, başlangıç dizisidir:

"teams": [{
     "teamName": "River";
     "selfLink": "http://localhost:4200/teams/1"
   },
   {
     "teamName": "Boca";
     "selfLink": "http://localhost:4200/teams/2"
   }]

Başlangıç dizisini oluşturuyorum:

ngOnInit(){
    this.match = new Match;
    this.availableTeams = [];
    this.getTeams();
    this.HomeTeamCtrl = new FormControl();
    this.filteredHomeTeams = this.HomeTeamCtrl.valueChanges
        .startWith(null)
        .map(team => team ? this.filterTeams(team) : this.availableTeams.slice());
  }

getTeams() {
    this.teamService.getTeamsList()
      .subscribe(
        teams => this.availableTeams = teams,
        error => console.log(error)
      );
  }

filterTeams(name: string) {
    return this.availableTeams.filter(team =>
      team.teamName.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

Tüm bunlar çalışıyor. Şimdi görebileceğiniz gibi, itmek için tamamlamam gereken bir "eşleşme" nesnem var ve işte sorum geliyor.

Aşağıdakileri yapmak için nasıl ilerlemeliyim:

Otomatik Tamamlama'daki seçenekler listemden bir takım adı seçtiğimde, o nesne için "selfLink" içindeki dizi ayrıştırılmalı ve ID (son sayı) this.match.homeTeam'e atanmalıdır

Cevap #1

En kolay yol, md-option (onSelectionChange)'e bağlanmak ve yerel değişkeni orada atamaktır.

<mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" (onSelectionChange)="match.homeTeam = team.selfLink">

veya bileşeninizde bir fonksiyon çağırın

**.html**
<mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" (onSelectionChange)="parseHomeTeam(team)">

**.component**
parseHomeTeam(team: Team) {
  // parse team logic here
}

İlgili makaleler