Question

我有一个来自https://jsonplaceholder.typicode.com/todos的服务。我需要根据单击的单选按钮过滤服务列表。

html：

<input type="radio" value="All"
  [(ngModel)]="selectedRadioButtonValue"
  (change)="onRadioButtonSelectionChanged(e)" />All

<input type="radio" value="true"
  [(ngModel)]="selectedRadioButtonValue" 
  (change)="onRadioButtonSelectionChanged(e)" />Completed True

<input type="radio" value="false"
  [(ngModel)]="selectedRadioButtonValue" 
  (change)="onRadioButtonSelectionChanged($Event)" />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 {
  e = this.selectedRadioButtonValue
  alert("hi"+ e);

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

当我第一次单击“完全正确”广播或“完全错误”广播时，似乎工作正常，但是当我单击“完全错误”广播后，单击“完全正确”广播后，我的功能正常从上次单选单击获得的列表中进行搜索，因此，当我在“完成为真”之后单击“完成为假”时，我无法返回任何完成的错误结果。请帮助。

Answer 1

尝试

<input type="radio" value="All"  (change)="onRadioButtonSelectionChanged('all')" />All

<input type="radio" value="true"  (change)="onRadioButtonSelectionChanged('true')" />Completed True

<input type="radio" value="false" (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上：

  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{

      //this._StudentHttpServService.getstudentHttpSrv().subscribe((employeeData) => //this.studentsfromapi=employeeData );
      console.log(this.studentsfromapi.filter(x=>x.completed.toString()==e.toLowerCase()));
      this.studentsfromapi = this.studentsfromapi.filter(x=>x.completed.toString()==e.toLowerCase() && x.id<5 );

    }

      }

数组上的过滤器函数无法第二次返回结果

1 个答案: