Для отображения выбранного значения из автозаполнения на столе

Question

Я использую компоненты autocomplete и table на одном и том же page/component. Здесь можно выбрать конкретный player из списка компонентов автозаполнения. Я хочу отобразить данные выбранного игрока (например, NAME и * 1006).*) в таблице вот так:

Я получил несколько примеров для отображения выбранного значения в поле ввода .Невозможно найти его для компонента таблицы.

Stackblitz DEMO

Answer 1

Связать keydown событие в поле ввода как (keydown)="handlekeypressEvent($event.target.value)",
Изменить данные таблицы в соответствии со значением keydownevent.

<input type="text" placeholder="Pick Player" 
(keydown)="handlekeypressEvent($event.target.value)" aria-label="Number"
 matInput [formControl]="myControl" [matAutocomplete]="auto">

handlekeypressEvent($event) {
      console.log($event);
      this.dataSource = new MatTableDataSource(ELEMENT_DATA.filter(e=> 
                         e.name.toLowerCase().includes($event.toLowerCase())));
    }

Демонстрация Stackblitz

Answer 2

Редактировать:

Будет ли это работать?

Обновлено и переработано!

dataSource = new MatTableDataSource();

Это будет гарантировать, что ваша таблица изначально пуста.

Добавьте это в функцию ngOnInit

this.myControl.valueChanges
  .subscribe(v => {

    if (!v) {
      this.dataSource = new MatTableDataSource(ELEMENT_DATA);
      return;
    }

    const newDataSource = ELEMENT_DATA.filter(ob => ob.name === v);
    this.dataSource = new MatTableDataSource(newDataSource);
  });

И когда вы измените значение из выпадающего списка, это заполнит таблицу.

PS:

Пустья знаю, если я все еще не достигаю вашей цели.

Answer 3

Есть несколько проблем с вашей текущей реализацией:

1. Вам придется работать с ELEMENT_DATA, чтобы отфильтровать результаты вместо options.
2. Вам придется переназначить dataSource отфильтрованный массив результатов.Это то, что я сделал в методе _filter.Но так как он вернул string[], а я фильтровал на ELEMENT_DATA, я изменил его тип возврата на PeriodicElement[].
3. Кроме того, вы используете options для предложений автозаполнения, вместо которых вы можете простоиспользуйте filteredOptions, а затем используйте option.name в mat-option с синтаксисом интерполяции строки ({{}})

Попробуйте:

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {MatSort,MatPaginator,  MatTableDataSource} from '@angular/material';

export interface PeriodicElement {
  name: string;
  age: number;
}
const ELEMENT_DATA: PeriodicElement[] = [
  { name: 'Sachin Tendulkar', age: 42, },
  { name: 'Virat Kohli', age: 30},
];

@Component({
  selector: 'autocomplete-filter-example',
  templateUrl: 'autocomplete-filter-example.html',
  styleUrls: ['autocomplete-filter-example.css'],
})
export class AutocompleteFilterExample implements OnInit {
    displayedColumns: string[] = [ 'name', 'age'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  myControl = new FormControl();
  options: string[] = ['Sachin Tendulkar', 'Virat Kohli', 'Rohith Sharma'];
  filteredOptions: Observable<PeriodicElement[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

 applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  private _filter(value: string): PeriodicElement[] {
    const filterValue = value.toLowerCase();
    const filteredSet = ELEMENT_DATA.filter(option => option.name.toLowerCase().includes(filterValue));
    this.dataSource = new MatTableDataSource(filteredSet);
    return filteredSet;
  }
}


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

И вВаш шаблон:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick Player" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">

      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>


<!-- <mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> -->


<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">


  <!-- NAME Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> NAME </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

   <!-- AGE Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> AGE </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

---

Вот Обновленный и рабочий StackBlitz для вашей ссылки.