无法对 json 文件中存在的数据应用搜索过滤器
Unable to apply search filter for data present in json file
这是我的 (custom.component.html) 文件
<input ng-model="searchText" placeholder=" Enter the name"
class="seacrh-field"><br><br>
<mat-card class="example-card" *ngFor="let spaceScreen of
spaceScreens;
let i = index">
<mat-card-header>
<div mat-card-avatar class="example-header-image" >
<img mat-card-image class="list-img" src="
{{spaceScreen?.img}}" >
</div>
<mat-card-content class="names">{{ spaceScreen?.name }}
</mat-card-content>
</mat-card-header>
</mat-card>
这是 (custom.component.ts) 个文件
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators'
@Component({
selector: 'ylb-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent {
spaceScreens: Array<any>;
constructor(private http:Http){
this.http.get('assets/app.json').pipe(
map(response => response.json().screenshots)
).subscribe(res => this.spaceScreens = res);
}
}
这是(app.json)资产文件夹中的文件
{
"screenshots":[
{
"img":"assets/img/json_2.jpg",
"name":"Virat Kohli"
},
{
"img":"assets/img/json_2.jpg",
"name":"Joe Root"
},
{
"img":"assets/img/json_2.jpg",
"name":"Adam Gilchrist"
},
{
"img":"assets/img/json_2.jpg",
"name":"Kevin Peterson"
},
{
"img":"assets/img/json_2.jpg",
"name":"Misbhah-Ul-Hak"
},
{
"img":"assets/img/json_2.jpg",
"name":"ABD Develliers"
},
{
"img":"assets/img/json_2.jpg",
"name":"Ben stokes"
},
{
"img":"assets/img/json_2.jpg",
"name":"Chris Gayle"
}
]
}
一切正常,我如何将搜索过滤器(如手机中的联系人列表)应用于 app.json file.Tried 中的数据,很多方法,仍然没有 result.How 我可以实现轻松使用自定义管道
在 Angular 1 年,大多数人使用管道进行过滤。 trichetriche 在另一个答案的评论中指出了这一点,并且是正确的。问题是允许这种行为会导致性能不佳,因为每个摘要周期都会触发过滤(这种情况经常发生)。所以在 Angular 2+ 他们希望你过滤组件中的结果并将结果存储在数组中,然后只需使用 *ngFor="myFilteredArray".
首先 在您的输入上设置绑定,这样我们就可以得到用户想要搜索的内容。
//Use this method if you want to track name for more than a filter.
//Result will be stored in name var
<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
//Use this if you don't need to track the name text for anything else.
<input type="text" (input)="onNameChangeInput($event.target.value)">
<div *ngFor="let s of filteredScreenshots">
{{s | json}}
</div>
其次为您的component.ts
添加更改功能
您将需要像 lodash 或 underscore 这样的库。
如果你没有安装 lodash - https://lodash.com/docs
npm install lodash
component.ts
import * as _ from 'lodash';
export class CustomerComponent {
spaceScreens: Array<any>;
filteredScreens = [];
name: string;
constructor(private http:Http){
this.http.get('assets/app.json').pipe(
map(response => response.json().screenshots)
)
.subscribe(res => {
this.spaceScreens = res; //this is what we filter against
this.filteredScreens = res; //init with full list
});
}
onNameChange() {
this.filteredScreens = _.filter(this.spaceScreens, (screenshot) => {
const name = screenshot['name'];
const filteredName = this.name.toUpperCase();
return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
});
}
onNameChangeInput(filteredName: string) {
this.filteredScreens = _.filter(this.spaceScreens, (screenshot) => {
const name = screenshot['name'];
filteredName = filteredName.toUpperCase();
return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
});
}
}
您只需要使用一个输入和一个更改函数,它们的名称恰当,因此每个输入对应的方法一目了然。
编辑:
我忘了提到这个解决方案不区分大小写,因为通常在这样的搜索中你不关心大小写。如果您希望它区分大小写,请删除 .toUpperCase()。
这是我的 (custom.component.html) 文件
<input ng-model="searchText" placeholder=" Enter the name"
class="seacrh-field"><br><br>
<mat-card class="example-card" *ngFor="let spaceScreen of
spaceScreens;
let i = index">
<mat-card-header>
<div mat-card-avatar class="example-header-image" >
<img mat-card-image class="list-img" src="
{{spaceScreen?.img}}" >
</div>
<mat-card-content class="names">{{ spaceScreen?.name }}
</mat-card-content>
</mat-card-header>
</mat-card>
这是 (custom.component.ts) 个文件
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators'
@Component({
selector: 'ylb-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent {
spaceScreens: Array<any>;
constructor(private http:Http){
this.http.get('assets/app.json').pipe(
map(response => response.json().screenshots)
).subscribe(res => this.spaceScreens = res);
}
}
这是(app.json)资产文件夹中的文件
{
"screenshots":[
{
"img":"assets/img/json_2.jpg",
"name":"Virat Kohli"
},
{
"img":"assets/img/json_2.jpg",
"name":"Joe Root"
},
{
"img":"assets/img/json_2.jpg",
"name":"Adam Gilchrist"
},
{
"img":"assets/img/json_2.jpg",
"name":"Kevin Peterson"
},
{
"img":"assets/img/json_2.jpg",
"name":"Misbhah-Ul-Hak"
},
{
"img":"assets/img/json_2.jpg",
"name":"ABD Develliers"
},
{
"img":"assets/img/json_2.jpg",
"name":"Ben stokes"
},
{
"img":"assets/img/json_2.jpg",
"name":"Chris Gayle"
}
]
}
一切正常,我如何将搜索过滤器(如手机中的联系人列表)应用于 app.json file.Tried 中的数据,很多方法,仍然没有 result.How 我可以实现轻松使用自定义管道
在 Angular 1 年,大多数人使用管道进行过滤。 trichetriche 在另一个答案的评论中指出了这一点,并且是正确的。问题是允许这种行为会导致性能不佳,因为每个摘要周期都会触发过滤(这种情况经常发生)。所以在 Angular 2+ 他们希望你过滤组件中的结果并将结果存储在数组中,然后只需使用 *ngFor="myFilteredArray".
首先 在您的输入上设置绑定,这样我们就可以得到用户想要搜索的内容。
//Use this method if you want to track name for more than a filter.
//Result will be stored in name var
<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
//Use this if you don't need to track the name text for anything else.
<input type="text" (input)="onNameChangeInput($event.target.value)">
<div *ngFor="let s of filteredScreenshots">
{{s | json}}
</div>
其次为您的component.ts
添加更改功能您将需要像 lodash 或 underscore 这样的库。 如果你没有安装 lodash - https://lodash.com/docs
npm install lodash
component.ts
import * as _ from 'lodash';
export class CustomerComponent {
spaceScreens: Array<any>;
filteredScreens = [];
name: string;
constructor(private http:Http){
this.http.get('assets/app.json').pipe(
map(response => response.json().screenshots)
)
.subscribe(res => {
this.spaceScreens = res; //this is what we filter against
this.filteredScreens = res; //init with full list
});
}
onNameChange() {
this.filteredScreens = _.filter(this.spaceScreens, (screenshot) => {
const name = screenshot['name'];
const filteredName = this.name.toUpperCase();
return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
});
}
onNameChangeInput(filteredName: string) {
this.filteredScreens = _.filter(this.spaceScreens, (screenshot) => {
const name = screenshot['name'];
filteredName = filteredName.toUpperCase();
return name === undefined ? false : name.toUpperCase().startsWith(filteredName);
});
}
}
您只需要使用一个输入和一个更改函数,它们的名称恰当,因此每个输入对应的方法一目了然。
编辑: 我忘了提到这个解决方案不区分大小写,因为通常在这样的搜索中你不关心大小写。如果您希望它区分大小写,请删除 .toUpperCase()。