Question

有没有办法在Angular2中切换选中的复选框列表？

我有一个按钮，当按下该按钮并查看完整列表时，它将仅显示列表中的已检查项目。再次按下该按钮时，它将显示整个列表。

Plunkr：http://plnkr.co/edit/jZz4XoHjYJ40bjt2eOU5?p=preview

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
       <li *ngFor="let col of data" class="form-group">
                                    <input type="checkbox" name="col" value="{{col.value}}" [(ngModel)]="col.value" (change)="addColumns(col)" />{{col.name}}
                                    </li>
  `,
})
export class App {
  name:string;
  data:any[]=[{"id":"13","name":"AAA"},{"id":"15","name":"BBB"},{"id":"20","name":"CCC"}]
  constructor() {
    this.name = 'Angular2'
  }
  get selectedcheckboxes() {
    return this.data
      .filter(opt => opt.value)  

  }

  addColumns(col){
    this.selectedcheckboxes;
    console.log(this.selectedcheckboxes)
  }
}

@NgModule({
  imports: [ BrowserModule,FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

HTML：

<body>
    <my-app>
    loading...
  </my-app>
  <button class="check">Collapse/Expand</button>
  </body>

在Angular1中，它看起来像这样：http://jsfiddle.net/jzhang172/of4yy8k9/我想在Angular2中做同样的事情，但无法理解语法。

Answer 1

您可以将主数组放在其他变量中，然后根据您单击的按钮更改数据变量（展开或折叠），您可能需要一个变量来定义它是完整列表还是选定列表

类似的东西：

isFullList: boolean;
mainData: Array<any> = [your main data here];
data: Array<any> = [data to use in list]; //should initied by mandata
toggle() {
    //this.isFullList: boolean

    if (!this.isFullList) {
      this.data = [...this.mainData];
    } else {
      this.data = [...this.selectedcheckboxes];
    }
    console.log(this.data)
    this.isFullList = ! this.isFullList
}

plunker：http://plnkr.co/edit/V1iiX87gYVMUtIkmpMfT?p=preview

Answer 2

您可以在组件上实现过滤器，并在模板中调用过滤器。

在过滤器中，只需添加一个标志即可控制以过滤或显示原始列表，并通过单击按钮切换标记。

在模板中调用过滤器

*ngFor="let col of getData()"

过滤组件中的数据

getData() {
  return this.filter ? this.data.filter(item => item.value === true) : this.data;
}

<强> Plunker Demo

Angular2，切换选中的复选框列表

2 个答案: