如何將角度材質自動完成中的值分配給我的組件中的變量？

我正在構建一個表單來創建一個POST到API。我正在使用Angular Material 4，並使用Material Design提供的Autocomplete組件。如何將角度材質自動完成中的值分配給我的組件中的變量？

這裏是我的HTML組件：

<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>

這是工作的罰款，我可以，如果我從列表中選擇的項目類型和過濾結果，那麼，它在輸入輸入領域，並保持在那裏。

正如你所看到的，我正在根據來自Team []數組的對象Team的屬性過濾列表。

該對象具有其他值，當然我需要做的是當我從我的Autocomplete選項列表中選擇一個值時，它應該調用一個方法使用同一個對象在屬性中獲取字符串，解析它並將其分配給一個變量。

這裏是我的團隊類：

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

這是最初的數組：

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

我創建初始數組：

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); 
    }

所有這一切工作正常。現在你可以看到，我有一個「匹配」對象，我需要完成推它，所以這裏來了我的問題。

我如何着手做到以下幾點：

當我選擇從我的自動完成，在「selfLink」字符串選項列表中的隊名該對象應分析和分配ID（最後一位數字）到this.match.homeTeam

來源

2017-10-21 Matias Diez

看起來像它在這裏：'optionSelections' '可觀察'https://material.angular.io/components/autocomplete/ API –

最簡單的方法是綁定到md-option (onSelectionChange)並分配局部變量存在。

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

或調用一個函數在組件

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

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

來源

2017-10-23 12:52:48

如何將角度材質自動完成中的值分配給我的組件中的變量？

回答

相關問題