Angular 2中的复选框过滤器

Question

我在表格中有一组对象（任务）和两个复选框：“夜晚”、“白天”。

我想要下一个场景：如果选中了“夜”复选框，则表中只剩下具有“夜”属性的任务。如果复选框 Day 被选中，则只有具有“Day”属性的任务会留在表格中（如果复选框“Night”仍然被选中，“Night”任务也会被留下）。第三个复选框“重置”重置过滤器。

也许使用另一种排序方式更好，例如管道？

这里是Plunkr。 这是一个代码：

@Component({
  selector: 'my-app',
  template: `
    <input type="checkbox" (click)="getNight()">Night
    <input type="checkbox" (click)="getDay()">Day
    <input type="checkbox">Uncheck
    <br><br>
    <table>
      <tr *ngFor="let task of tasks">
        <td>{{task.chkBoxImageUrl}}</td>
        <td>{{task.id}}</td>
        <td>{{task.val}}</td>
      </tr>
    </table>
  `,
})
export class App {
  tasks: Array<{chkBoxImageUrl: string, id: string, val: string, 
checked:boolean}> = [
    {chkBoxImageUrl: "http1", id: "item1", val: "Night", checked: false},
    {chkBoxImageUrl: "http2", id: "item2", val: "Day", checked: false},
    {chkBoxImageUrl: "http3", id: "item3", val: "Night", checked: false},
    {chkBoxImageUrl: "http4", id: "item4", val: "Day", checked: false},
    {chkBoxImageUrl: "http4", id: "item4", val: "Morning", checked: false},
    {chkBoxImageUrl: "http4", id: "item4", val: "Evening", checked: false}
  ];

  getNight() {
   console.log(this.tasks[2].val); // Night 
   // return this.tasks.filter(obj => obj.checked).map(obj => obj.val);
   if(this.tasks.val == 'Night') {
    return this.tasks.filter(obj => obj.checked).map(obj => obj.val == 'Night');
   } else {
     console.log('666666');
   }
  };
  getDay() {
   return this.tasks.filter(obj => obj.checked).map(obj => obj.val);
  };
  getCheckedCount(){
    return this.getCheckedValues().length;
  }
}

Answer 1

在此处更新plunkr

为了过滤 tasks 数组，Night 和 Day 复选框值需要可访问。一种方法是创建实例变量night 和day 并使用ngModel 指令将它们绑定到相应的复选框。

组件：

night: boolean = false;
day: boolean = false;

查看：

<input type="checkbox" [(ngModel)]="night">Night
<input type="checkbox" [(ngModel)]="day">Day

night 和 day 现在在选中时为真，在未选中时为假。这些值可用于过滤tasks 数组。

组件：

interface Task {
  chkBoxImageUrl: string;
  id: string;
  val: string;
  checked:boolean;
}

getTasks(): Array<Task> {
  return this.tasks.filter(obj => this.night && obj.val === 'Night' || this.day && obj.val === 'Day');
}

查看：

<tr *ngFor="let task of getTasks()">

getTasks() 方法返回一个任务数组，根据night 和day 的值进行过滤。然后将其绑定到视图。

要在选中 Uncheck 复选框时清除复选框，可以将 night 和 day 的值重置为 false。

组件：

uncheck() {
  this.night = false;
  this.day = false;
}

查看：

<input type="checkbox" (click)="uncheck()">Uncheck

点击后，其他复选框被重置，这会改变getTasks()的结果

Answer 2

好吧，它可以使用一些重构，因为它不漂亮......但我在这里更新了你的 plunker：https://plnkr.co/edit/PaHGSZW69Wl8tC1o2wEo?p=preview。您可能需要对它做更多的工作来清理我的代码。

我把 html 改成这样：

<input type="checkbox" (click) = "filterTasks('Night')">Night
<input type="checkbox" (click) = "filterTasks('Day')">Day

所以它调用一个方法而不是两个不同的方法。

filterTask 方法如下所示：

  filterTasks(value: string) {
    if (value === 'Night') { this.nightChecked = !this.nightChecked }
    if (value === 'Day') { this.dayChecked = !this.dayChecked }
   this.filteredTasks = this.tasks.filter(obj => 
                 (this.nightChecked && obj.val === "Night") || 
                 (this.dayChecked && obj.val === "Day"));
  }

使用数据绑定 ([(ngModel)] 来设置两个属性而不是使用 (click) 事件可能会更好。（我知道这是另一个答案所做的。）