Question

我能够修复上一个问题中的错误。现在我有一个复选框列表，我想通过单击标签取消选中所选复选框。这样的事情：https://run.plnkr.co/plunks/5WkoJK/。

以下是我的代码

categories.component.html

<input [(ngModel)]="searchText" placeholder="search text goes here">
<span class="filter-clear" *ngIf="searchText.length>0" (click)="clearFilter()">X</span>
<ul class="list-unstyled scrollbar">
<li *ngFor="let category of categories| filter : searchText; let i = index">
<label class="custom-control custom-checkbox">
    <input type="checkbox" name="category" id="checkbox{{ i +1 }}" [(ngModel)]="category.selected" value="{{category}}" (click)="check(category, $event)" class="custom-control-input">
    <small class="custom-control-indicator"></small>
    <small class="custom-control-label">{{ category }}</small>
</label>
</li>
</ul>

  <div (click)="deleteCategory(category)" class="selected-game" *ngFor="let category of myarray" >
    <span>{{category}}</span>
  </div>

categories.component.ts

import { Component, NgModule, OnInit,  Input, Output, EventEmitter } from '@angular/core';
import { Feeds } from '../shared/services/feeds';
import { FeedsService } from '../shared/services/feeds.service';
import { Categories } from '../shared/services/categories';
import { CategoriesService } from '../shared/services/categories.service';
import { MyService } from '../shared/services/my-service.service';
import { Pipe, PipeTransform } from '@angular/core';
import { FilterPipe } from '../shared/pipes/category-type.pipe';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.scss']
})
export class CategoriesComponent implements OnInit {

  categories: Categories[];

  feeds: Feeds[];

  myarray = [];

  myobj = {
    'categories': this.myarray
  };

  searchText = '';
  selected_count = 0;

  constructor(private categoriesService: CategoriesService, private myService: MyService) {
  }

  ngOnInit() {
    this.getCategories();
  }

  clearFilter() {
    this.searchText = '';
  }

   // Clearing All Selections
   clearSelection() {
    this.searchText = '';
    this.categories =  this.categories.filter( g => {
          g.checked = false;
          return true;
        });
  }

   deleteCategory(category) {
    this.searchText = '';
    const index = this.myarray.indexOf(category);
    this.myarray.splice(index, 1);
    this.categories = this.categories.filter(name => name !== category);
  }

  getCategories(): void {
    this.categoriesService.getCategories().subscribe(categories => this.categories = categories);
   }

   getCategoryFeeds(myobj): void {
    this.categoriesService.getfeedsByCategories(myobj).subscribe( feeds => { this.myService.change(feeds); });
   }


  check(category, event) {
     if (event.target.checked) {
      this.myarray.push(category);
      this.getCategoryFeeds(this.myobj);
    } else if (!event.target.checked) {
      const index = this.myarray.indexOf(category);
      this.myarray.splice(index, 1);
      this.getCategoryFeeds(this.myobj);
    }
    if (!event.target.checked && this.myarray.length === 0) {
      this.myService.loadAll();
    }
  }

}

categories.ts

export class Categories {
  category_name: string;
  checked: false;
}

点击任何复选框后，它会被添加到myarray 数组

中

我对deleteCategory函数感到有点困惑。当我尝试单击复选框列表底部的标签时。不取消选中已选中的复选框，而是删除复选框本身。

我按照这个例子：http://www.freakyjolly.com/angular-4-5-typescript-create-filter-list-with-check-boxes-to-select-from-list/

它与我的代码有点不同。帮助赞赏。

Answer 1

您需要在checkbox标签中使用[checked]属性。删除复选框的原因是您从数组中删除项目和* ngFor update。或者在deleteCategory中，您可以更改为catecory.selected = false

修改添加代码
将deleteCategory改为

deleteCategory(category) {
this.searchText = '';
const index = this.myarray.indexOf(category);
this.myarray.splice(index, 1);
this.categories = this.categories.map(name => {
  if (name === category)
    name.checked = false  
  return name
});}

和你的html到
<input type="checkbox" name="category" id="checkbox{{ i +1 }}" [(ngModel)]="category.checked" value="{{category}}" (click)="check(category, $event)"
这对我有用

Answer 2

只需在示例中替换以下代码....

＆＃13;

<input (change)="getSelected()" type="checkbox"
    name="games" value="{{g.id}}"
    id="{{g.id}}" [(ngModel)]="g.selected"/>

<label class="game-text" for="{{g.id}}">{{g.name}}</label>

＆＃13;

在输入中的上面添加的id属性和label中的属性也用标签替换了span。

http://plnkr.co/edit/R0bQ4xEDp2vtCrAri6bQ?p=preview

Answer 3

在将category.selected移至false之前，您可以使用始终安全的click代替ngModelChange事件，并检查参考泄漏黑/类别和myarray，使用{ {1}}或push明智地根据您的需要。

取消选中Angular 5中的标签复选框

3 个答案: