在表格上显示自动完成的选定值

我在同一个 page/component 上使用了 autocompletetable 组件 . 在从自动完成组件列表中选择特定的 player 时,我希望在表格中显示选择的玩家详细信息(对于ex NAMEAGE ),如下所示:

enter image description here

我有一些例子 to display the selected value on the input field . 无法找到表组件 .

Stackblitz DEMO

回答(3)

2 years ago

您当前的实施存在一些问题:

  • 您必须使用 ELEMENT_DATA 来过滤结果而不是 options .

  • 您必须重新分配 dataSource 已提交的结果数组 . 's something that I'已经在 _filter 方法中完成了 . 但是因为它返回 string[] 并且我在 ELEMENT_DATA 上过滤了我将其返回类型更改为 PeriodicElement[] .

  • 此外,您正在使用 options 作为自动完成建议而不是您可以使用 filteredOptions 然后在 mat-option 中使用 option.name 并使用字符串插值语法( {{}}

尝试一下:

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 .

2 years ago

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

2 years ago

编辑:

这会有用吗?

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:

如果我还没有达到您的目标,请告诉我 .