Javascript Angular2，切换复选框列表_Javascript_Html_Angular

Javascript Angular2，切换复选框列表

javascript html angular

Javascript Angular2，切换复选框列表,javascript,html,angular,Javascript,Html,Angular,有没有办法在Angular2中切换复选框列表我有一个按钮，当按下并看到完整的列表时，它将只显示列表中选中的项目。再次按下按钮时，将显示整个列表普朗克： //我们的根应用程序组件从“@angular/core”导入{Component，NgModule} 从“@angular/platform browser”导入{BrowserModule} 从'@angular/forms'导入{FormsModule，ReactiveFormsModule}； @组成部分({ 选择器：“我的应用程序”

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

我有一个按钮，当按下并看到完整的列表时，它将只显示列表中选中的项目。再次按下按钮时，将显示整个列表

普朗克：

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule}
从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}

{{col.name}}

`,
})
导出类应用程序{
名称：字符串；
数据：任意[]=[{“id”：“13”，“名称”：“AAA”}，{“id”：“15”，“名称”：“BBB”}，{“id”：“20”，“名称”：“CCC”}]
构造函数（）{
this.name='Angular2'
}
获取所选复选框（）{
返回此.data
.filter（opt=>opt.value）
}
添加列（列）{
此选项。选中复选框；
console.log（此.selected复选框）
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

HTML:

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


加载。。。
折叠/扩展

在Angular1中，它看起来是这样的：我希望在Angular2中做同样的事情，但不理解语法。

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

在过滤器中，只需添加一个标志来控制过滤器或显示原始列表，然后单击按钮切换标志

在模板上调用筛选器

*ngFor="let col of getData()"

过滤组件中的数据

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

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

比如：

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
}

isFullList:boolean；
主数据：数组你的意思是说。当按下按钮时，您希望取消选中所有选中项checkbox@UbiquitousDevelopers不，当我按下按钮时，它将只显示复选框列表，当我再次按下按钮时，它将重新显示整个复选框列表（选中和未选中），因此您希望在同一按钮上有两个功能，不是吗？是的，但希望有一个简单的方法来来回切换，因为在Angular 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
}