gpt4 book ai didi

javascript - Angular 4过滤器搜索自定义管道

转载 作者:太空狗 更新时间:2023-10-29 18:04:36 27 4
gpt4 key购买 nike

因此,我正在尝试构建一个自定义管道,以在 ngFor 循环中执行多个值的搜索过滤器。我花了几个小时寻找一个很好的工作示例,其中大部分都是基于以前的构建并且似乎不起作用。所以我正在构建管道并使用控制台给我这些值。但是,我似乎无法显示输入文本。

以下是我之前寻找工作示例的地方:

Angular 4 Pipe Filter

http://jilles.me/ng-filter-in-angular2-pipes/

https://mytechnetknowhows.wordpress.com/2017/02/18/angular-2-pipes-passing-multiple-filters-to-pipes/

https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

https://www.youtube.com/results?search_query=filter+search+angular+2

https://www.youtube.com/watch?v=UgMhQpkjCFg

这是我目前拥有的代码:

组件.html

<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter>

<div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
<input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
<label for="{{lock.ID}}" class="check-label"></label>
<h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3>
<h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3>
<h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3>
<h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3>
</div>

管道.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'LockFilter'
})

export class LockFilterPipe implements PipeTransform {
transform(locked: any, query: string): any {
console.log(locked); //this shows in the console
console.log(query); //this does not show anything in the console when typing
if(!query) {
return locked;
}
return locked.filter((lock) => {
return lock.User.toLowerCase().match(query.toLowerCase());
});
}
}

我已将管道导入到模块中。

我对 Angular 4 还是比较陌生,正在尝试弄清楚如何让它工作。无论如何感谢您的帮助!

我想我需要更具体一些。我已经在 J​​S 中构建了一个过滤器搜索,它不会过滤所有选项,这正是我想要做的。不只是过滤用户名。我正在过滤所有 4 条数据。我选择了一个管道,因为这是 Angular 建议你做的,因为他们最初在 AngularJS 中使用它们。我只是想从本质上重新创建我们在 AngularJS 中的过滤器管道,它们为了性能而删除了。我发现的所有选项都不起作用,或者来自以前的 Angular 版本。

如果您需要我的代码中的任何其他内容,请告诉我。

最佳答案

我必须在本地实现搜索功能,这里更新了您的代码。请这样做。

这是我必须更新的代码。

目录结构

app/
_pipe/
search/
search.pipe.ts
search.pipe.spec.ts
app/
app.component.css
app.component.html
app.component.ts
app.module.ts
app.component.spec.ts

创建管道的命令运行

ng g pipe search

component.html

<input type="text" class="form-control" placeholder="Search" [(ngModel)]="query" id="listSearch">
<div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
<input type="checkbox" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
<label [for]="lock.ID" class="check-label"></label>
<h3 class="card-text name">{{lock.User}}</h3>
<h3 class="card-text auth">{{lock.AuthID}}</h3>
<h3 class="card-text form">{{lock.FormName}}</h3>
<h3 class="card-text win">{{lock.WinHandle}}</h3>
</div>

component.js

注意:在这个文件中,我必须使用虚拟记录来实现和测试目的。

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
public search:any = '';
locked: any[] = [];

constructor(){}

ngOnInit(){
this.locked = [
{ID: 1, User: 'Agustin', AuthID: '68114', FormName: 'Fellman', WinHandle: 'Oak Way'},
{ID: 2, User: 'Alden', AuthID: '98101', FormName: 'Raccoon Run', WinHandle: 'Newsome'},
{ID: 3, User: 'Ramon', AuthID: '28586', FormName: 'Yorkshire Circle', WinHandle: 'Dennis'},
{ID: 4, User: 'Elbert', AuthID: '91775', FormName: 'Lee', WinHandle: 'Middleville Road'},
]
}
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SearchPipe } from './_pipe/search/search.pipe';


@NgModule({
declarations: [
AppComponent,
SearchPipe
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'LockFilter'
})

export class SearchPipe implements PipeTransform {
transform(value: any, args?: any): any {

if(!value)return null;
if(!args)return value;

args = args.toLowerCase();

return value.filter(function(item){
return JSON.stringify(item).toLowerCase().includes(args);
});
}
}

我希望您能获得管道功能,这会对您有所帮助。

关于javascript - Angular 4过滤器搜索自定义管道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46780843/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com