Javascript 角度:TypeScript表中的搜索栏
我已经完成了一个简单的CRUD应用程序,现在我必须添加一个搜索栏来过滤我的表,并向我显示与我数字相同字母的行 我不知道该在我的组件中做什么,我看到了管道和过滤器的不同之处,但我无法使它们适应我的项目 我想知道是否有一种方法可以在不创建新方法的情况下实现到component.ts COMPONENT.HTMLJavascript 角度:TypeScript表中的搜索栏,javascript,html,angular,typescript,angular-ngmodelchange,Javascript,Html,Angular,Typescript,Angular Ngmodelchange,我已经完成了一个简单的CRUD应用程序,现在我必须添加一个搜索栏来过滤我的表,并向我显示与我数字相同字母的行 我不知道该在我的组件中做什么,我看到了管道和过滤器的不同之处,但我无法使它们适应我的项目 我想知道是否有一种方法可以在不创建新方法的情况下实现到component.ts COMPONENT.HTML <div class="container"> <ul class="table-wrapper"> <div class="table-title
<div class="container">
<ul class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-4">
<button *ngIf="metadata && metadata.addMD" (click)="addFunc(metadata)">{{metadata.addMD.label}}</button>
<div class="show-entries">
<span>Show</span>
<label>
<select [(ngModel)]="pageSize">
<option *ngFor="let maxPerPage of rowsOnPageSet"
(click)="maxElements(maxPerPage)">{{maxPerPage}}</option>
</select>
</label>
<span>users</span>
</div>
</div>
<div class="col-sm-4">
<h2 class="text-center">Users <b>Details</b></h2>
</div>
<div class="col-sm-4">
<div class="search-box">
<div class="input-group">
<span class="input-group-addon"><i class="material-icons"></i></span>
--> //HERE I HAVE TO ADD THE FUNCTION OR SOMETHING ELSE
<input type="text" class="form-control" [(ngModel)]="searchVal"
(ngModelChange)='checkSearchVal()' placeholder="Search…">
</div>
</div>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th *ngFor="let col of columns" (click)="sortTable(col)">{{col}}
<i *ngIf="col === columnSorted && !direction" class="material-icons">keyboard_arrow_up</i>
<i *ngIf="col === columnSorted && direction" class="material-icons">keyboard_arrow_down</i>
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | paginate: {itemsPerPage: pageSize,
currentPage: page,
totalItems: users.length}">
<td *ngFor="let col of columns">{{user[col]}}</td>
<td>
<button [ngClass]="getClassCondition(act.actionType)" *ngFor="let act of actions"
(click)="actionFunc(act, user)">{{act.label}}</button>
</td>
</tr>
</tbody>
</table>
<div align="center">
<!--<div class="hint-text">Showing <b>{{totUsersPerPage}}</b> out of <b>{{users.length}}</b> entries</div>-->
<ul align="center">
<pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>
</ul>
</div>
</ul>
</div>
数据结构:
in.memory-data.service.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { User } from './user';
import { Injectable } from '@angular/core';
export const COLUMNS = ['id', 'firstName', 'lastName', 'age'];
@Injectable({
providedIn: 'root',
})
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const USERS = [
{id: 1, firstName: 'NAME_1', lastName: 'SURNAME_1', age: 23},
{id: 2, firstName: 'NAME_2', lastName: 'SURNAME_2', age: 23},
{id: 3, firstName: 'NAME_3', lastName: 'SURNAME_3', age: 23},
{id: 4, firstName: 'NAME_4', lastName: 'SURNAME_4', age: 24},
{id: 5, firstName: 'NAME_5', lastName: 'SURNAME_5', age: 42},
{id: 6, firstName: 'NAME_6', lastName: 'SURNAME_6', age: 41},
{id: 7, firstName: 'NAME_7', lastName: 'SURNAME_7', age: 24},
{id: 8, firstName: 'NAME_8', lastName: 'SURNAME_8', age: 25},
{id: 9, firstName: 'NAME_9', lastName: 'SURNAME_9', age: 25},
{id: 10, firstName: 'NAME_10', lastName: 'SURNAME_10', age: 25},
{id: 11, firstName: 'NAME_11', lastName: 'SURNAME_11', age: 22},
{id: 12, firstName: 'NAME_12', lastName: 'SURNAME_12', age: 22},
{id: 13, firstName: 'NAME_13', lastName: 'SURNAME_13', age: 24},
];
return {USERS};
}
}
user.ts
export class User {
id: number;
firstName: string;
lastName: string;
age: number;
}
只需创建一个PIPE.ts文件来筛选表:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterAll'
})
export class FilterPipe implements PipeTransform {
transform(value: any, searchText: any): any {
if(!searchText) {
return value;
}
return value.filter((data) => this.matchValue(data,searchText));
}
matchValue(data, value) {
return Object.keys(data).map((key) => {
return new RegExp(value, 'gi').test(data[key]);
}).some(result => result);
}
}
将过滤器管道添加到声明中的app.module.ts
并将其添加到您的组件.html:
<form id="searchForm">
<div class="form-group">
<div class="input-group" id="filterAll">
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
<input type="text" class="form-control" name="searchString" placeholder="Search..." [(ngModel)]="searchString">
</div>
</div>
</form>
我看到你得到了答案。。。这是另一种值得的方法。。。正如评论中所讨论的
checkSearchVal() {
this.USERS = masterUSERS.slice();
let filteredUsers: User[] = [];
if (this.searchVal && this.searchVal != '') {
/* NORMAL FOR
for(var i=0; i<this.USERS.length; i++ ){
if(this.USERS[i].firstName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 || this.USERS[i].lastName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 ){
filteredUsers.push(this.USERS[i])
}
}
*/
/* FOR EACH
this.USERS.forEach((selectedUser) => {
if (selectedUser.firstName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 ||
selectedUser.lastName.toLowerCase().search(this.searchVal.toLowerCase()) != -1) {
filteredUsers.push(selectedUser);
}
})
*/
/* FOR OF */
for (let selectedUser of this.USERS) {
if (selectedUser.firstName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 ||
selectedUser.lastName.toLowerCase().search(this.searchVal.toLowerCase()) != -1) {
filteredUsers.push(selectedUser);
}
}
this.USERS = filteredUsers.slice();
}
}
checkSearchVal(){
this.USERS=masterUSERS.slice();
let filteredUsers:用户[]=[];
if(this.searchVal&&this.searchVal!=''){
/*正常的
对于(var i=0;i{
if(selectedUser.firstName.toLowerCase().search(this.searchVal.toLowerCase())!=-1||
selectedUser.lastName.toLowerCase().search(this.searchVal.toLowerCase())!=-1){
filteredUsers.push(选择用户);
}
})
*/
/*为了*/
for(选择此.USERS的用户){
if(selectedUser.firstName.toLowerCase().search(this.searchVal.toLowerCase())!=-1||
selectedUser.lastName.toLowerCase().search(this.searchVal.toLowerCase())!=-1){
filteredUsers.push(选择用户);
}
}
this.USERS=filteredUsers.slice();
}
}
更新:移动了this.USERS=filteredUsers.slice();在IF内部
更新:2:与HTML文件中的forEach和For Of相同的代码(以消除TSLint错误)。在搜索输入上添加一个[(ngModel)]和ngModelChange='searchFunction()“…在TS文件中,将逻辑添加到此searchFunction()中这可能会根据搜索输入字段的内容过滤数据结构…是的,问题是ts中的函数…共享数据结构,我可以帮助过滤code@AkberIqbal我编辑了这个问题。如果你还需要其他东西,请告诉我,提前谢谢!我想使用你的编辑,在我得到错误的那一刻感谢您告诉我“TSLint:在这个简单的迭代中,应该是‘for of’循环而不是‘for’循环(更喜欢for of)”。当我运行它时,它可以工作,但如果我从搜索栏中删除文本,表将返回空值,在stackBlitz的示例中也是如此。它应该返回所有数据。@S.a.R.a.moved
this.USERS=filteredUsers.slice()
在IF语句中…没有看到stackblitz上的TSLint问题…您可以在stackblitz上重新创建它吗?好的,这很完美,它可以工作!关于“for”中的错误呢“,我正在检查,但它看起来很奇怪……嗨@S.A.R.A.,谢谢你的投票和接受的答案;奇怪的是,它想让你为……写作。。。我曾经读过一篇文章,把普通人和普通人做了比较。。。获胜者是我们的正常人…我注意到它在stackBlitz上运行良好,我编辑了我的问题,在HTML中为搜索栏添加了行,并在我的组件中添加了方法。ts:从搜索栏删除文本时空表的问题仍然存在。。。为什么?这很好用,你能解释一下管道的具体功能吗?此外,我还想搜索列,因此在搜索栏中添加一个下拉列表和我的列数组,选择一个并搜索它。如您所见,filter.ts得到两个值,“value”和“searchText”。该值是表的数据和筛选字符串的searchText。基本上比较searchText字符串的值和数据,并返回它。如果搜索列时存在匹配项,您希望在表中显示什么?只有那个科伦?谢谢你的解释;)我想从下拉列表或复选框中选择列,然后搜索栏将只对该列中的文本起作用,并向我显示相同的结果,因此行表。示例:搜索名称、姓氏……首先将下拉列表与列数组一起添加,然后您必须以某种方式告诉表过滤器仅影响选定的列。好的是,您不必更改pipe.ts文件
<tr *ngFor="let user of users | paginate: {itemsPerPage: pageSize,
currentPage: page,
totalItems: users.length} | filterAll: searchString">
public searchString: string;
checkSearchVal() {
this.USERS = masterUSERS.slice();
let filteredUsers: User[] = [];
if (this.searchVal && this.searchVal != '') {
/* NORMAL FOR
for(var i=0; i<this.USERS.length; i++ ){
if(this.USERS[i].firstName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 || this.USERS[i].lastName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 ){
filteredUsers.push(this.USERS[i])
}
}
*/
/* FOR EACH
this.USERS.forEach((selectedUser) => {
if (selectedUser.firstName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 ||
selectedUser.lastName.toLowerCase().search(this.searchVal.toLowerCase()) != -1) {
filteredUsers.push(selectedUser);
}
})
*/
/* FOR OF */
for (let selectedUser of this.USERS) {
if (selectedUser.firstName.toLowerCase().search(this.searchVal.toLowerCase()) != -1 ||
selectedUser.lastName.toLowerCase().search(this.searchVal.toLowerCase()) != -1) {
filteredUsers.push(selectedUser);
}
}
this.USERS = filteredUsers.slice();
}
}