[英]How to add checked and unchecked checkboxes data to Firebase
我的Ionic 3应用程序中有一个对象数组作为入门数据:
public interesses = [
{ name: 'Viagens', checked: false },
{ name: 'Animais', checked: false },
{ name: 'Teatro', checked: false },
{ name: 'Outros', checked: false }
];
我正在尝试从该数组创建多个复选框,并在Firebase中添加所有数据,包括此列表中的选中和未选中项。
现在,我的.ts代码是:
interessesG :any = [];
profileForm: FormGroup;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private afAuth: AngularFireAuth,
public db: AngularFireDatabase,
public fb: FormBuilder) {
this.profileForm = fb.group({
interesses: new FormArray([])
});
}
checado(data, i, isChecked: boolean) {
this.interessesG = <FormArray>this.profileForm.controls.interesses;
if (isChecked) {
this.interessesG.push(new FormControl({name: data.name, checked: true}));
console.log(this.interessesG.value);
} else {
let index = this.interessesG.controls.findIndex(x => x.value == data)
this.interessesG.removeAt(index);
console.log(this.interessesG.value);
}
}
saveProfile(){
this.db.object('users/' + this.userId).update({
interesses: this.interessesG.value
}).then(() => {
console.log("Success!");
}, error => {
console.error(error);
}
);
}
和我的.html文件:
<div formArrayName="interesses">
<ion-item class="int-list" no-lines *ngFor="let int of interesses; let i = index">
<ion-label>{{int.name}}</ion-label>
<ion-checkbox slot="end" (ionChange)="checado(int, i, $event.checked)"></ion-checkbox>
</ion-item>
</div>
使用此代码,我只得到选中的项目(显示在控制台上):
0: {name: "Animais", checked: true}
但是我需要得到这样的东西:
0: { name: 'Viagens', checked: false },
1: { name: 'Animais', checked: true },
2: { name: 'Teatro', checked: false },
3: { name: 'Outros', checked: false }
我怎样才能做到这一点?
您可以直接更改现有数组以获取数组中的所有对象值。
checado(data, i, isChecked: boolean) {
let newObj = data;
newObj.checked = isChecked;
this.interesses[i] = newObj;
console.log(this.interesses);
}
如果只希望对象,请使用以下内容。
console.log(...this.interesses);
我用您的代码创建了一个stackblitz示例。 https://stackblitz.com/edit/ionic-58mfcp
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.