从每个 *ngFor ionic 4, ionic 5, ionic 6 获取值
Get value from each *ngFor ionic 4, ionic 5, ionic 6
我有以下代码:
<ion-item *ngFor="let box of boxes">
这将显示数组的结果:
在 .ts 文件中我有以下内容:
isApproved : boolean;
public box: any;
这将从框数组生成:
- box1 -> [id, name, isApproved]
- box2 -> [id, name, isApproved]
- box3 ->[id, name, isApproved]
我需要获取每个框的 isApproved 值,因此当我激活切换时,isApproved 将在数据库中更改。
我知道一种方法不符合我的需要,例如单击并从路线获取 ID,但我想为此打开一个新页面。
只需将 ngModel
放入 ion-toggle
:
html:
<ion-item *ngFor="let box of boxes">
<ion-avatar slot="start"></ion-avatar>
<ion-label>...</ion-label>
<ion-toggle [(ngModel)]="box.isApproved" (ionChange)="approvedToggled($event)"></ion-toggle>
</ion-item>
ts:
approvedToggled(event, box) {
if(event.detail.value) {
// save to box to database
}
/* or:
if(item.isApproved) {
// save to database
}
*/
}
解决方法很简单。
工作代码是:
我的 HTML:
<div *ngFor="let box of boxes">
<ion-item-sliding id="anyId">
<ion-item>
<ion-avatar slot="start">
<img [offset]="100" [alt]="box.user?.name"
defaultImage="./assets/img/photo.png" [lazyLoad]="box.user?.photo?.url()" />
</ion-avatar>
<ion-label class="ion-text-wrap">
<ion-text color="dark">
<h3 class="bold no-margin">
{{ box.user?.name }}
</h3>
</ion-text>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="primary" (click)="onDelete(box)">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
在我的 TS 上我有:
导入服务:
import { Box } from '../../services/box-service';
在构造函数之前:
public boxes: Box[] = [];
public box: Box;
constructor(private BoxService: Box) {
super(injector);
}
正在从服务加载盒子:
async loadDataFromService() {
try {
const boxes = await this.boxService.loadBoxes(this.params);
for (let box of boxes) {
this.boxes.push(box);
}
this.onRefreshComplete(boxes);
} catch {
}
}
...这将 return 一个包含数组的数组。每个数组都有一个对象。
现在我们只需从 HTML (click)="onDelete(box)"
访问每个框
async onDelete(box: Box) {
await Swal.fire({
title: 'Are you sure?',
text: 'Blah, blah',
icon: 'warning',
iconColor: '#5038de',
showCancelButton: true,
confirmButtonColor: '#5038de',
cancelButtonColor: '#e0b500',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
heightAuto: false,
showClass: {
popup: 'animated fade-in'
},
hideClass: {
popup: 'animated fade-out'
}
}).then(async (result) => {
if (result.value) {
await this.boxService.deleteBox(box)
this.goTo()
} else {
this.goTo()
}
});
}
}
正在恢复,解决方案:
<ion-item *ngFor="let box of boxes">
<ion-avatar slot="start"></ion-avatar>
<ion-label>...</ion-label>
<ion-toggle (ionChange)="myFunction(box)"></ion-toggle>
</ion-item>
只是 (ionChange)="myFunction(box)" 或 (click)="myFunction(box)"
在我的例子中 box 将是一个完整的对象,传递 id 就足以执行任何操作。
我有以下代码:
<ion-item *ngFor="let box of boxes">
这将显示数组的结果:
在 .ts 文件中我有以下内容:
isApproved : boolean;
public box: any;
这将从框数组生成:
- box1 -> [id, name, isApproved]
- box2 -> [id, name, isApproved]
- box3 ->[id, name, isApproved]
我需要获取每个框的 isApproved 值,因此当我激活切换时,isApproved 将在数据库中更改。
我知道一种方法不符合我的需要,例如单击并从路线获取 ID,但我想为此打开一个新页面。
只需将 ngModel
放入 ion-toggle
:
html:
<ion-item *ngFor="let box of boxes">
<ion-avatar slot="start"></ion-avatar>
<ion-label>...</ion-label>
<ion-toggle [(ngModel)]="box.isApproved" (ionChange)="approvedToggled($event)"></ion-toggle>
</ion-item>
ts:
approvedToggled(event, box) {
if(event.detail.value) {
// save to box to database
}
/* or:
if(item.isApproved) {
// save to database
}
*/
}
解决方法很简单。 工作代码是:
我的 HTML:
<div *ngFor="let box of boxes">
<ion-item-sliding id="anyId">
<ion-item>
<ion-avatar slot="start">
<img [offset]="100" [alt]="box.user?.name"
defaultImage="./assets/img/photo.png" [lazyLoad]="box.user?.photo?.url()" />
</ion-avatar>
<ion-label class="ion-text-wrap">
<ion-text color="dark">
<h3 class="bold no-margin">
{{ box.user?.name }}
</h3>
</ion-text>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="primary" (click)="onDelete(box)">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
在我的 TS 上我有:
导入服务:
import { Box } from '../../services/box-service';
在构造函数之前:
public boxes: Box[] = [];
public box: Box;
constructor(private BoxService: Box) {
super(injector);
}
正在从服务加载盒子:
async loadDataFromService() {
try {
const boxes = await this.boxService.loadBoxes(this.params);
for (let box of boxes) {
this.boxes.push(box);
}
this.onRefreshComplete(boxes);
} catch {
}
}
...这将 return 一个包含数组的数组。每个数组都有一个对象。
现在我们只需从 HTML (click)="onDelete(box)"
访问每个框 async onDelete(box: Box) {
await Swal.fire({
title: 'Are you sure?',
text: 'Blah, blah',
icon: 'warning',
iconColor: '#5038de',
showCancelButton: true,
confirmButtonColor: '#5038de',
cancelButtonColor: '#e0b500',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
heightAuto: false,
showClass: {
popup: 'animated fade-in'
},
hideClass: {
popup: 'animated fade-out'
}
}).then(async (result) => {
if (result.value) {
await this.boxService.deleteBox(box)
this.goTo()
} else {
this.goTo()
}
});
}
}
正在恢复,解决方案:
<ion-item *ngFor="let box of boxes">
<ion-avatar slot="start"></ion-avatar>
<ion-label>...</ion-label>
<ion-toggle (ionChange)="myFunction(box)"></ion-toggle>
</ion-item>
只是 (ionChange)="myFunction(box)" 或 (click)="myFunction(box)"
在我的例子中 box 将是一个完整的对象,传递 id 就足以执行任何操作。