如何根据下拉列表中的多项选择过滤结果? [英] How can I filter results based on multiple selections from dropdown?

问题描述

我正在关注 Angular Material 的材质表示例，目前，他们使用输入的结果过滤了表示例.

我在材料表示例中添加了两个下拉列表，我希望能够从两个下拉列表中选择一个值并根据两个下拉列表中的两个值执行搜索.例如.在这种情况下，如果我选择 8 和氢，我应该不会得到任何结果，因为 8 和氢不是同一记录/项目的一部分.但是，如果我选择 1 和氢，我应该取回氢，因为 1 和氢值是同一项目/记录的一部分.

这是 stackbiltz:https:///stackblitz.com/edit/angular-t67ae3-huzvd6?file=app%2Ftable-filtering-example.ts

代码片段如下:

组件:

import {Component} from '@angular/core';从@angular/material"导入{MatTableDataSource}；/*** @title 表带过滤*/@成分({选择器:'表过滤示例'，styleUrls: ['table-filtering-example.css'],templateUrl: 'table-filtering-example.html',})导出类 TableFilteringExample {displayColumns = ['位置'，'名称'，'重量'，'符号'];数据源 = 新的 MatTableDataSource(ELEMENT_DATA);//如何根据选定的值进行过滤?搜索(selectedValue:字符串，selectedValueEle:字符串){selectedValue = selectedValue.trim();//去除空格selectedValue = selectedValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource.filter = selectedValue &&选定的值元素；调试器}}导出接口元素{名称:字符串；位置:编号；重量:数量；符号:字符串；}const ELEMENT_DATA: 元素 [] = [{位置:1，名称:'氢'，重量:1.0079，符号:'H'}，{位置:2，名称:'Helium'，重量:4.0026，符号:'He'}，{位置:3，名称:'锂'，重量:6.941，符号:'锂'}，{位置:4，名称:'铍'，重量:9.0122，符号:'Be'}，{位置:5，名称:'硼'，重量:10.811，符号:'B'}，{位置:6，名称:'碳'，重量:12.0107，符号:'C'}，{位置:7，名称:'氮'，重量:14.0067，符号:'N'}，{位置:8，名称:'氧气'，重量:15.9994，符号:'O'}，{位置:9，名称:'氟'，重量:18.9984，符号:'F'}，{位置:10，名称:'霓虹'，重量:20.1797，符号:'Ne'}，{位置:11，名称:'钠'，重量:22.9897，符号:'Na'}，{位置:12，名称:'镁'，重量:24.305，符号:'镁'}，{位置:13，名称:'铝'，重量:26.9815，符号:'铝'}，{位置:14，名称:'硅'，重量:28.0855，符号:'Si'}，{位置:15，名称:'磷'，重量:30.9738，符号:'P'}，{位置:16，名称:'硫'，重量:32.065，符号:'S'}，{位置:17，名称:'氯'，重量:35.453，符号:'Cl'}，{位置:18，名称:'氩'，重量:39.948，符号:'Ar'}，{位置:19，名称:'钾'，重量:39.0983，符号:'K'}，{位置:20，名称:'钙'，重量:40.078，符号:'Ca'}，];

html:

<div class="example-header"><选择#selectedValueEle><option value="8">8</option><option value="9">9</option></选择><选择#selectedValue><option value="Hydrogen">Hydrogen</option><option value="Helium">Helium</option></选择><button (click)="search(selectedValue.value, selectedValueEle.value)">搜索</button><mat-form-field><input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"></mat-form-field>
<mat-table #table [dataSource]="dataSource"><!-- 位置列--><ng-container matColumnDef="position"><mat-h​​eader-cell *matHeaderCellDef>号</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.position}} </mat-cell></ng-容器><!-- 名称列--><ng-container matColumnDef="name"><mat-h​​eader-cell *matHeaderCellDef>名称</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.name}} </mat-cell></ng-容器><!-- 权重栏--><ng-container matColumnDef="weight"><mat-h​​eader-cell *matHeaderCellDef>重量</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.weight}} </mat-cell></ng-容器><!-- 符号列--><ng-container matColumnDef="symbol"><mat-h​​eader-cell *matHeaderCellDef>符号</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.symbol}} </mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table>

解决方案

如果换行:

this.dataSource.filter = selectedValue &&选定的值元素；

与:

this.dataSource.filter = selectedValueEle + selectedValue;

这应该可以解决问题！

这是因为根据 Angular 表格文档 https://material.angular.io/components/table/overview#filtering:

<块引用>

例如，数据对象 {id: 123, name: 'Mr.Smith', favoriteColor: 'blue'} 将减少到 123mr.史密斯蓝.如果您的过滤器字符串为蓝色，那么它将被视为匹配项，因为它包含在缩减字符串中，并且该行将显示在表格中.

据我所知，他们正在做一个简单的字符串搜索.因此，通过连接值和元素，它正在对1Hydrogen"进行字符串搜索，并在简化的数据对象1Hydrogen1.0079H"中找到它.

但是您必须按照1Hydrogen"的顺序使用它，因此通过将 selectedValueEle 放在第一位，然后将 selectedValue 放在后面，您将获得正确的格式.希望这有帮助，祝你好运！

I'm following the material table example from Angular Material and currently, they have a filtering the table example with typed in results.

I added two dropdowns to the material table example and I want to be able to select a value from both dropdowns and perform a search based on both values from the two dropdowns. E.g. in this case, if I select 8 and Hydrogen, I should not get any results because 8 and hydrogen are not part of the same record/item. If I select however 1 and hydrogen, I should get back hydrogen because 1 and hydrogen values are part of the same item/record.

Here's the stackbiltz: https://stackblitz.com/edit/angular-t67ae3-huzvd6?file=app%2Ftable-filtering-example.ts

Here's the code snippets:

component:

import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';

/**
 * @title Table with filtering
 */
@Component({
  selector: 'table-filtering-example',
  styleUrls: ['table-filtering-example.css'],
  templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

//How do I filter based on selected value? 
  search(selectedValue: string, selectedValueEle: string) {
      selectedValue = selectedValue.trim(); // Remove whitespace
    selectedValue = selectedValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
     this.dataSource.filter = selectedValue && selectedValueEle;
     debugger 
  }
}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

html:

<div class="example-container mat-elevation-z8">
  <div class="example-header">

    <select #selectedValueEle>
      <option value="8">8</option>
      <option value="9">9</option>
    </select>
    <select #selectedValue>
      <option value="Hydrogen">Hydrogen</option>
      <option value="Helium">Helium</option>
    </select>
    <button (click)="search(selectedValue.value, selectedValueEle.value)">Search</button>
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

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

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

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

解决方案

If you replace the line:

this.dataSource.filter = selectedValue && selectedValueEle;

with:

this.dataSource.filter = selectedValueEle + selectedValue;

that should do the trick!

This is because according to the Angular table documentation https://material.angular.io/components/table/overview#filtering:

For example, the data object {id: 123, name: 'Mr. Smith', favoriteColor: 'blue'} will be reduced to 123mr. smithblue. If your filter string was blue then it would be considered a match because it is contained in the reduced string, and the row would be displayed in the table.

From what I understand, they're doing a simple string search. So by concatenating the value and the element, it's doing a string search on "1Hydrogen" and finds it in the reduced data object, "1Hydrogen1.0079H."

But you must have it in the order of "1Hydrogen," so by having selectedValueEle be first and selectedValue next, you'll have it in the correct format. Hope this helped and good luck!

这篇关于如何根据下拉列表中的多项选择过滤结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！