Question

我在同一个autocomplete上使用table和page/component组件。在这里，从自动填充组件列表中选择特定的player时，我要显示所选球员的详细信息（像这样在桌上的NAME和AGE）：

我有一些示例在输入字段上显示选定的值。无法找到表组件。

Stackblitz DEMO

Answer 1

您当前的实现存在一些问题：

您必须使用ELEMENT_DATA来过滤结果，而不是options。
您将不得不将提交的结果数组重新分配给dataSource。这是我在_filter方法中所做的事情。但是由于它返回了string[]并且我正在过滤ELEMENT_DATA，所以将其返回类型更改为PeriodicElement[]。
此外，您将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>

这里是Updated and Working StackBlitz供您参考。

Answer 2

在输入字段上将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 Demo

Answer 3

编辑：

这项工作可以吗？

Updated And Reworked!

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

当您从下拉列表中更改值时，将填充表格。

P.S。

如果我仍然没有实现您的目标，请告诉我。

要在表格上显示自动填充中的选定值

3 个答案: