Question

我正在Angular 2+中编写一个基本的应用程序，但我想知道切换管道过滤器的最佳方法，我尝试使用boolean? "filter1" : "filter2"，但它一直给我关于'toUpperCase'的错误，所以这就是我提出了，虽然它是功能性的，它重复代码，它可以避免并找到最有效的方法来执行此操作;

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Serves</th>
    <th>Remarks</th>
  </tr>
  <ng-container *ngIf="filterText">
    <tr *ngFor="let recipe of recipes | searchByString: filterText">
      <td>{{ recipe.ID }}</td>
      <td>{{ recipe.name }}</td>
      <td>{{ recipe.serves }}</td>
      <td>{{ recipe.remarks }}</td>
    </tr>
  </ng-container>
  <ng-container *ngIf="!filterText">
    <tr *ngFor="let recipe of recipes | OrderBy : (filter? ['-name'] : ['+name'])">
      <td>{{ recipe.ID }}</td>
      <td>{{ recipe.name }}</td>
      <td>{{ recipe.serves }}</td>
      <td>{{ recipe.remarks }}</td>
    </tr>
  </ng-container>
  </table>

Sort recipe by name<input type="checkbox"  [(ngModel)]="filter">
<p></p>
Filter String: <input type="text" [(ngModel)]="filterText"
                      class="form-control" placeholder="Search By Category" />

正如你在上面看到的那样重复代码，虽然它有效但是我认为这与标准做法背道而驰？无论哪种方式都是id而不是学习如何正确地做到这一点，而我还是新手。

切换管道过滤器的最佳方法？

0 个答案: