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

3 回答

• 0

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

  • 您必须使用 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 .

  回复于 2024-04-26T11:06:56+08:00
• 0

  将 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

  回复于 2024-04-26T11:06:56+08:00
• 0

  编辑：

  这会有用吗？

  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：

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

  回复于 2024-04-26T11:06:56+08:00