如何在复选框内显示数组元素 - 离子

Question

我有一个简单的问题，我正在从火碱检索数据到数组列表中。 我想用复选框显示这个数组。 你能帮忙吗？ Firebase的列表数组(任务)已准备就绪，只是尝试在复选框内显示它。 属性"选中"在类型"事件.目标"中不存在

这是 TS 代码：

let currentUid=this.afAuth.auth.currentUser.uid.valueOf();
this.items = afDB.list('ToDoList/'+currentUid).valueChanges();
this.items.subscribe((data)=>{
console.log(""+ data);
this.tasks = data;
checked($event){
if(event.target.checked==true)
{
}
else
{
}
}

网页代码 ：

<ion-item class="text" *ngFor="let task of tasks">
<input type="checkbox" (change)="checked($event,task)"/>

Answer 1

您非常接近，您只需要按ionChange(docs) 更改change事件绑定并稍微不同地处理$event。

请查看此Stackblitz 项目的HomePage，以获取工作演示。

元件：

@Component({...})
export class HomePage {
public tasks = [
"Task 1",
"Task 2",
"Task 3"
];
constructor(public navCtrl: NavController) {}
checked(event: any, task: any){
const isChecked = event.checked;
// Here you can include your custom logic
// to handle what happens when the checkbox
// is checked or unchecked :)
if(isChecked) {
console.log(`The task ${task} is checked!`)
// ...
// ...
} else {
console.log(`The task ${task} is unchecked!`)
// ...
// ...
}
}
}

请注意，该方法接收event和所选task，您可以使用event.checked来获取复选框的状态。

视图：

<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!-- ... -->
<ion-list>
<ion-item *ngFor="let task of tasks">
<ion-label>{{ task }}</ion-label>
<ion-checkbox (ionChange)="checked($event, task)"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>