过滤器函数不会重新引用原始数组

Question

我在更改事件中有一个函数，其中包含 3 个单选按钮：全部、已完成 true 和已完成 false。我希望当我单击已完成的 true 时，数组应该只返回已完成的项目：其中为 true，同样为 false。但是正在发生的事情是，当我先单击完成的 true，然后单击 false 时，不会显示 false 值，因为它是从已过滤的 true 值中过滤的，在那里它找不到 false 值。

.html：

<input type="radio" value="All" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChanged('all')" />All
<input type="radio" value="true" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChanged('true')" />Completed True
<input type="radio" value="false" [(ngModel)]="selectedRadioButtonValue" (change)="onRadioButtonSelectionChanged('false')" />Completed False
<table><tr *ngFor="let f of studentsfromapi | slice:0:10 | searchPipe:srchbytitle">
<td>{{f.userId}}</td>
<td><a [routerLink]="['/student-details', f.id]">{{f.id}}</a></td>
<!--<td><a routerLink="['/student-details/{{f.id}}">{{f.id}}</a></td>-->
<td>{{f.title}}</td>
<td>{{f.completed}}</td>
</tr>
</table>

TS：

selectedRadioButtonValue:string;

onRadioButtonSelectionChanged(e):any{

if(e=='all'){
console.log("studentsfromapi:::"+this.studentsfromapi);
// return f.title.indexOf(args.toLowerCase())>-1
//return this.studentsfromapi.indexOf(e.toLowerCase())>-1
}
else if(e=='true'){
//this._StudentHttpServService.getstudentHttpSrv().subscribe((employeeData) => //this.studentsfromapi=employeeData );
console.log('true');
this.studentsfromapi = this.studentsfromapi.filter(x=>x.completed.toString()==e.toLowerCase() && x.id<5 );
}
else if(e=='false'){
//this._StudentHttpServService.getstudentHttpSrv().subscribe((employeeData) => //this.studentsfromapi=employeeData );
console.log('false');
this.studentsfromapi = this.studentsfromapi.filter(x=>x.completed.toString()==e.toLowerCase() && x.id<5 );
}
}

在这里，studentsfromapi是返回所有数组的可值。 所以我在this.studentsfromapi上使用过滤器功能 数组来自这个：

服务文件：

export class StudentHttpServService {
constructor(private _http:Http) { }
getstudentHttpSrv(): Observable<IStudentHttp[]>{
return this._http.get('https://jsonplaceholder.typicode.com/todos')
.map((response:Response) => <IStudentHttp[]>response.json());
}

请帮忙。

Answer 1

你可以做这样的事情，你每次都使用filteredResult，这样学生fromapi就不会受到影响。

//this is original array
var studentsfromapi = [{"id":1,completed:true,name:"test"},{"id":2,completed:false,name:"test1"},{"id":3,completed:true,name:"test2"}];
var filteredResult = [];
filteredResult = studentsfromapi.filter(a=> a.completed);
console.log(filteredResult);
filteredResult = studentsfromapi.filter(a=> !a.completed);
console.log(filteredResult1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

问题出在这一行

this.studentsfromapi = this.studentsfromapi.filter(x=>x.completed.toString()==e.toLowerCase() && x.id<5 );

您应该对过滤的项目使用不同的数组

filteredStudentsFromApi = [];
this.filteredStudentsFromApi = this.studentsfromapi.filter(x=>x.completed.toString()==e.toLowerCase() && x.id<5 );

并在 HTML 中使用 filteredStudentsFromApi