有没有办法在 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 中做同样的事情，但无法理解语法。
最佳答案
您可以将主数组放在其他变量中，然后只需根据单击的按钮更改数据变量(展开或折叠)，您可能需要一个变量来定义它是完整列表还是选定列表
类似于:
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
}
关于javascript - Angular2，切换选中的复选框列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45853784/