Question

我在表格中有一系列对象（任务）和两个复选框：＆＃34; Night＆＃34;，＆＃34; Day＆＃34;。

我想要下一个场景：如果选中复选框Night，则只选择具有属性＆＃34; Night＆＃34;留在桌子上。如果选中复选框日，则只有具有属性＆＃34; Day＆＃34;留在桌子上（＆＃34;夜晚＆＃34;如果复选框＆＃34;夜晚＆＃34;仍然被检查，任务也会被留下）。第三个复选框＆＃34;重置＆＃34;重置过滤器。

使用其他方式排序可能会更好，例如管道？

此处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现在在检查时为true，在未选中时为false。这些值可用于过滤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的值进行过滤。然后将其绑定到视图。

要在选中取消选中复选框时清除复选框，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）事件。（我看到这是另一个答案所做的。）

Angular 2中的复选框过滤器

2 个答案: