如何根据下拉菜单中的多个选择过滤结果? [英] How can I filter results based on multiple selections from dropdown?
问题描述
我正在关注Angular Material的材质表示例，目前，他们正在过滤带有输入结果的表格示例.
I'm following the material table example from Angular Material and currently, they have a filtering the table example with typed in results.
我在物料表示例中添加了两个下拉菜单，我希望能够从两个下拉菜单中选择一个值，并基于两个下拉菜单中的两个值进行搜索.例如.在这种情况下，如果我选择8和氢，我将不会获得任何结果，因为8和氢不是同一记录/项目的一部分.但是，如果我选择1和氢，我应该取回氢，因为1和氢值是同一项目/记录的一部分.
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.
这是stackbiltz: https://stackblitz.com/edit/angular-t67ae3-huzvd6?file=app%2Ftable-filtering-example.ts
Here's the stackbiltz: https://stackblitz.com/edit/angular-t67ae3-huzvd6?file=app%2Ftable-filtering-example.ts
以下是代码段:
组件:
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>
推荐答案
如果替换以下行:
this.dataSource.filter = selectedValue && selectedValueEle;
具有:
this.dataSource.filter = selectedValueEle + selectedValue;
应该可以解决问题的
这是因为根据Angular表文档 https://material.angular. io/components/table/overview#filtering :
This is because according to the Angular table documentation https://material.angular.io/components/table/overview#filtering:
例如，数据对象{id:123，名称:"Mr. Smith'，收藏夹颜色:'blue'}将减少到123mr.史密斯蓝.如果您的过滤器字符串为蓝色，则将其视为匹配项，因为它包含在精简字符串中，并且该行将显示在表格中.
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.
据我了解，他们正在做一个简单的字符串搜索.因此，通过连接值和元素，它可以在"1Hydrogen"上进行字符串搜索，并在精简数据对象"1Hydrogen1.0079H"中找到它.
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."
但是您必须按"1Hydrogen"的顺序进行操作，因此，先将selectedValueEle置于其后，然后将selectedValue置于正确的格式.希望这会有所帮助，并祝你好运！
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屋！
