Question

在3个单选按钮的更改事件中，我具有一个功能：全部，完成为true和完成为false。我希望当我单击completed 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

问题在这一行

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

Answer 2

您可以执行以下操作，每次使用 filteredResult ，这样 studentsfromapi 不会受到影响。

//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>

筛选器功能未检索到原始数组

2 个答案: