如何使用angular 2过滤复选框更改的数据？

我想使用复选框对我的数据执行筛选。我有两个复选框1-乐趣，2-点击学习复选框数据应该过滤

component.html

<div class="type">
     <label>ACTIVITY TYPE</label>
     <div class="form-group">                                
          <div class="col-xs-12">
               <div class="checkbox">
                    <label>
                       <input type="checkbox" (change)="typefilter($event)" [(ngModel)]="type" name="type" #type> Learning
                    </label>
               </div>
           </div>
           <div class="col-xs-12">
                <div class="checkbox">
                     <label>
                        <input type="checkbox" (change)="typefilter($event)" [(ngModel)]="type" name="type" #type> Fun
                      </label>
                 </div>
           </div>
      </div>
</div>

---

根据以上评论，您可以尝试以下方法：

<div class="type filters__item">
     <label>ACTIVITY TYPE</label>
     <div class="form-group">                                
          <div class="col-xs-12">
               <div class="checkbox">
                    <label>
                       <input type="checkbox" (change)="typefilter($event, 'Learning')" [(ngModel)]="type" name="type" #type> Learning
                    </label>
               </div>
           </div>
           <div class="col-xs-12">
                <div class="checkbox">
                     <label>
                        <input type="checkbox" (change)="typefilter($event, 'Fun')" [(ngModel)]="type" name="type" #type> Fun
                      </label>
                 </div>
           </div>
      </div>
</div>

---

你甚至不再需要

这个。键入
，因为你可以在你的过滤器中使用
typeOfActivity
，但为了清晰起见，我把它放在那里了。
基于上面的评论，你可以尝试以下方法：

<div class="type filters__item">
     <label>ACTIVITY TYPE</label>
     <div class="form-group">                                
          <div class="col-xs-12">
               <div class="checkbox">
                    <label>
                       <input type="checkbox" (change)="typefilter($event, 'Learning')" [(ngModel)]="type" name="type" #type> Learning
                    </label>
               </div>
           </div>
           <div class="col-xs-12">
                <div class="checkbox">
                     <label>
                        <input type="checkbox" (change)="typefilter($event, 'Fun')" [(ngModel)]="type" name="type" #type> Fun
                      </label>
                 </div>
           </div>
      </div>
</div>

你甚至不再需要
这个。键入
，因为你可以在你的过滤器中使用
typeOfActivity
，但为了清晰起见，我把它放在了那里。
对ex0dm3nt提供的答案做了一些更改，因为我认为它确实不能按预期工作。如果两个中都有相同的
ngModel
，则在单击其中一个时会选中这两个复选框。此外，我认为您不希望同时单击这两个复选框，因此在这里我已禁用了另一个复选框，以防单击其中一个复选框。可能有点笨重，但应该可以按照您的意愿工作：）

编辑：对代码做了一些更改，因为我认为您不应该进行不必要的API调用，只需检索一次数据，然后从原始数组中切换这些值：

ngOnInit() {
  this.service.getData().then(data => {
    this.origActivities = data // original data to filter
    this.activities = data; // displays all activities upon initialization
  })
}

typefilter(event: any, filterValue: string) {
  this.activities = this.origActivities;
  if(event.target.checked) {
     if(this.fun && !this.learning){
        this.activities = this.origActivities.filter(a => a.type == filterValue); 
     }
     else if (this.learning && !this.fun) {
        this.activities = this.origActivities.filter(a => a.type == filterValue); 
     }
     else if (this.learning && this.fun) {
       this.activities = this.origActivities;
     }
  }
  else { // user unchecks value 
     if(this.fun) {
       this.activities = this.origActivities.filter(a => a.type == "fun"); 
     }
     else if (this.learning) {
       this.activities = this.origActivities.filter(a => a.type == "learning"); 
     }
   }
 }

在有限的时间内，这里有一个
 对ex0dm3nt提供的答案做了一些更改，因为我认为它确实没有达到预期效果。如果两个中都有相同的
ngModel
，则在单击其中一个时会选中这两个复选框。此外，我认为您不希望同时单击这两个复选框，因此在这里我已禁用了另一个复选框，以防单击其中一个复选框。可能有点笨重，但应该可以按照您的意愿工作：）

编辑：对代码做了一些更改，因为我认为您不应该进行不必要的API调用，只需检索一次数据，然后从原始数组中切换这些值：

ngOnInit() {
  this.service.getData().then(data => {
    this.origActivities = data // original data to filter
    this.activities = data; // displays all activities upon initialization
  })
}

typefilter(event: any, filterValue: string) {
  this.activities = this.origActivities;
  if(event.target.checked) {
     if(this.fun && !this.learning){
        this.activities = this.origActivities.filter(a => a.type == filterValue); 
     }
     else if (this.learning && !this.fun) {
        this.activities = this.origActivities.filter(a => a.type == filterValue); 
     }
     else if (this.learning && this.fun) {
       this.activities = this.origActivities;
     }
  }
  else { // user unchecks value 
     if(this.fun) {
       this.activities = this.origActivities.filter(a => a.type == "fun"); 
     }
     else if (this.learning) {
       this.activities = this.origActivities.filter(a => a.type == "learning"); 
     }
   }
 }

在有限的时间内，这里有一个
 当您选中复选框时，
typefilter
方法是否被触发，如果是，那么
event.target
和
event.target.checked
的状态是什么？当我单击复选框时，两个选项都被选中@ex0dm3ntOk，但是您的
typefilter
方法是否被触发？能否添加
console.log（事件）或
控制台.log（事件.target）
在
typefilter
方法的开头，然后在
console.log（event.target）之后选中复选框？时检查浏览器控制台是否记录了任何内容
我得到了
@ex0dm3tI应该有这个问题的线索：你希望你的过滤器做什么？：）当您选中复选框时，
typefilter
方法是否被触发，如果是，那么
event.target
和
event.target.checked
的状态是什么？当我单击复选框时，两个选项都被选中@ex0dm3ntOk，但是您的
typefilter
方法是否被触发？能否添加
console.log（事件）或
控制台.log（事件.target）
在
typefilter
方法的开头，然后在
console.log（event.target）之后选中复选框？时检查浏览器控制台是否记录了任何内容
我得到了
@ex0dm3tI应该有这个问题的线索：你希望你的过滤器做什么？：）你的代码不起作用@AJT_82数据没有被过滤用一个演示程序更新我的答案，请检查：）是的，但这就像单选按钮一样工作，你一次只能检查一个。当然，你希望它如何工作，你没有提到：）告诉我，我会相应地调整我的答案：）如果我点击fun，它会显示fun筛选器数据，如果我点击learning，它会执行两个筛选器数据，如果我取消选中这两个选项，则会显示所有数据您的代码不工作@AJT_82 data not filter使用演示plunker更新我的答案，检查：）是的，但这就像单选按钮一样，一次只能检查一个。当然，你希望它如何工作，你没有提到：）告诉我，我会相应地调整我的答案：）如果我点击fun，它会显示fun过滤数据，如果我点击learning，它会执行两个过滤数据，如果我不选中这两个选项，它会显示所有数据删除
this.type=typeOfActivitytypefilter
方法中选择code>行，从HTML模板中的复选框中选择
[（ngModel）]=“type”
。working man但如果我第一次单击fun，它将显示fun筛选器数据，然后如果我单击learning，它将在@ex0dm3ntremove
this.type=typeOfActivity执行这两个筛选数据typefilter
方法的code>行和来自HTML模板中复选框的
[（ngModel）]=“type”
。working man但如果我第一次单击fun，它将显示fun筛选器数据，然后如果我单击learning，它将在ex0dm3nt执行这两个筛选数据
fun: boolean = false;
learning: boolean = false;

ngOnInit() {
  this.service.getData().then(data => {
    this.origActivities = data // original data to filter
    this.activities = data; // displays all activities upon initialization
  })
}

typefilter(event: any, filterValue: string) {
  this.activities = this.origActivities;
  if(event.target.checked) {
     if(this.fun && !this.learning){
        this.activities = this.origActivities.filter(a => a.type == filterValue); 
     }
     else if (this.learning && !this.fun) {
        this.activities = this.origActivities.filter(a => a.type == filterValue); 
     }
     else if (this.learning && this.fun) {
       this.activities = this.origActivities;
     }
  }
  else { // user unchecks value 
     if(this.fun) {
       this.activities = this.origActivities.filter(a => a.type == "fun"); 
     }
     else if (this.learning) {
       this.activities = this.origActivities.filter(a => a.type == "learning"); 
     }
   }
 }