有没有办法将选中/勾选的项目保存到数组中？答案

【问题标题】：Is there a way to save the checked/ticked items into an array?有没有办法将选中/勾选的项目保存到数组中？
【发布时间】：2019-06-21 11:53:40
【问题描述】：

我在图像上使用 Checkbox 插件做了一个这样的网格，

数据项已被标记为描述、已检查/未检查的布尔值、ID 等。

这是我的模板代码：

<StackLayout class="topbuttons">
<GridLayout columns="*,*" horizontalAlignment="left" verticalAlignment="top">
    <Button class="btn btn-primary topbutton" text="Next" col="1" (tap)="onTap()"></Button>
</GridLayout>

<GridLayout tkExampleTitle tkToggleNavButton  class="topgrid" loaded="loaded" >
<RadListView [items]="dataItems" >
    <ng-template tkListItemTemplate let-item="item">
            <GridLayout class="garmentpick">
                <Image [src]="item.image" (tap)="toggleCheck()" class="imageP" >
                 </Image>
                <CheckBox #CB1 checked="false" text="{{ item.id }}" ></CheckBox>
        </GridLayout>
    </ng-template>
    <ListViewGridLayout tkListViewLayout ios:itemHeight="200" spanCount="2"></ListViewGridLayout>
</RadListView>

打字稿

 export const DATAITEMS: Array<DataItem> = [
{    id: 5451545, 
     name: "Chefs Collection",
     description: "This is item description.",
     image: "~/images/chefscollection.jpg",
     selected: false 
},
];

export class Component implements OnInit {
@ViewChild("CB1") firstCheckBox: ElementRef;

ngOnInit(): void {

    this._dataItems = new ObservableArray(this.getDataItems());
}
getDataItems(): Array<DataItem> {
    return DATAITEMS;
}
toggleCheck() {
    console.log();
    this.firstCheckBox.nativeElement.toggle();
}
onTap() {
    const checkboxArray = new ObservableArray(this.items);
    this._dataItems.forEach((item) => {
       checkboxArray.push(this.firstCheckBox.nativeElement.text);
    });        
}
}

我想将点击的项目保存到一个数组中。我创建了一个数组，我将单击的项目推送到提交按钮的 ontap 中的数组，但是使用 Array.push(item.id) 只推送一个项目，或者在该数组中重复它。有什么办法可以做到这一点，我正在考虑数据表单

【问题讨论】：

标签： arrays angular checkbox nativescript

【解决方案1】：

您的函数正在循环数组，它总是推送相同的元素。你应该这样做：

onTap() {
    const checkboxArray = new ObservableArray(this.items);
        this._dataItems.forEach((item) => {
        if(item.selected){
          checkboxArray.push(item);
        }
    });        
}

通过这种方式，您推送的是项目本身，而不是真正的原生元素。如果你想推动整个复选框，你应该看看QuerySelector。如果您希望我进一步向您解释 QuerySelector，请告诉我。

【讨论】：

我认为查询选择器可能会起作用。上述方式没有将任何内容放入数组中，因为 _dataItem 是由我定义的，并且所有内容都定义为 selected:false 直到有人勾选。
forEach((item)) 只浏览静态值

【解决方案2】：

也许，通过使用filter，如果我了解您想要什么，您就可以实现您想要的：

checkboxArray = this._dataItems.filter((item) => item.selected);

【讨论】：

谢谢，但我想过滤我检查过的项目。如果我能以某种方式首先将那些勾选的项目放入某种数组中。 this._dataItems 包含我硬编码的项目，这些项目在我选中复选框并提交之前是错误的