Получение углового значения автозаполнения - PullRequest
Новая
       7

Получение углового значения автозаполнения

0 голосов
/ 24 мая 2018

Таким образом, я следовал документации Angular об автозаполнении Angular Material, но два дня боролся с получением значения выбора из Autocomplete.По сути, я хочу, чтобы автозаполнение отображало имена и фамилии людей, но значение параметра должно быть полным объектом человека.Затем я просто хочу console.log SelectedHuman всякий раз, когда выбран человек.Любое решение этого, вероятно, подойдет.

Вот демонстрационный проект, с которым можно поиграть: https://stackblitz.com/edit/angular-hnu6uj

Вот HTML-файл: 

<input [(ngModel)]="SelectedHuman" (change)="OnHumanSelected()" matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
  <mat-option *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

Вотts file: класс экспорта AutocompleteDisplayExample реализует OnInit {

  SelectedHuman: Human;
  MyControl = new FormControl();
  arrFilteredHumans: Observable<Human[]>;
  arrHumans = [
    new Human('1K59DN3', 27, 'John', 'Smith'),
    new Human('9VH23JS', 67, 'William', 'Shakespeare'),
    new Human('0QNF1HJ', 44, 'Elon', 'Musk')
  ];

  ngOnInit() {
    this.arrFilteredHumans = this.MyControl.valueChanges.pipe(
      startWith(''),
      map((val) => this.filter(val))
    );
  }

  filter(val: any): Human[] {
    return this.arrHumans.filter((item: any) => {
      //If the user selects an option, the value becomes a Human object,
      //therefore we need to reset the val for the filter because an
      //object cannot be used in this toLowerCase filter
      if (typeof val === 'object') { val = "" };
      const TempString = item.Name + ' - ' + item.Surname;
      return TempString.toLowerCase().includes(val.toLowerCase());
    });
  }

  AutoCompleteDisplay(item: any): string {
    if (item == undefined) { return }
    return item.Name + ' - ' + item.Surname;
  }

  OnHumanSelected() {
    console.log(this.MyControl); //This has the correct data
    console.log(this.MyControl.value); //Why is this different than the above result?
    console.log(this.SelectedHuman); //I want this to log the Selected Human Object
  }
}

export class Human {
  constructor(
    public ID: string,
    public Age: number,
    public Name: string,
    public Surname: string
  ) { }
}

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Ниже ссылка на stackBitz, которую вы можете проверить

StackBitz

Вот код 

   OnHumanSelected(SelectedHuman) {
    console.log(SelectedHuman); // get from view
    console.log(this.SelectedHuman); // get from variable
  }

HTML-файл 

  <input [(ngModel)]="SelectedHuman"  matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
    <mat-option (click)="OnHumanSelected(SelectedHuman)"  *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

Спасибо

0 голосов
/ 24 мая 2018

Событие щелчка и событие выбора - это два разных события.Вы хотите выбранное событие, а не событие щелчка, поэтому используйте optionSelected из MatAutocomplete: 

<mat-autocomplete 
    #auto="matAutocomplete" 
    [displayWith]="AutoCompleteDisplay"
    (optionSelected)="OnHumanSelected($event.option)">

    <!-- 
    ... 
    -->

</mat-autocomplete>

OnHumanSelected(option: MatOption) {
    console.log(option.value);
}
0 голосов
/ 24 мая 2018

Так что, похоже, это решает проблему.Поместите функцию OnHumanSelected () в событие (click) параметра mat: 

  <mat-option  (click)="OnHumanSelected()" *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>

  ####################

  OnHumanSelected() {
    console.log(this.SelectedHuman);
  }
...