从每个 *ngFor ionic 4, ionic 5, ionic 6 获取值

Posted

技术标签:

【中文标题】从每个 *ngFor ionic 4, ionic 5, ionic 6 获取值【英文标题】:Get value from each *ngFor ionic 4, ionic 5, ionic 6 【发布时间】:2021-12-19 07:52:21 【问题描述】:

我有以下代码:

<ion-item *ngFor="let box of boxes">

这将显示数组的结果:

在 .ts 文件中,我有以下内容:

  isApproved : boolean;
  public box: any;

这将从 box 数组中生成:

box1 -> [id, name, isApproved] box2 -> [id, name, isApproved] box3 ->[id, name, isApproved]

我需要获取每个框的 isApproved 值,所以当我激活切换时,isApproved 将在数据库中更改。

我知道一种不符合我需要的方法,例如单击并从路由中获取 id,但我想为此打开一个新页面。

【问题讨论】:

【参考方案1】:

只需将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
   
   */

【讨论】:

你好,TypeError: 无法设置 [object Object] 的属性 isApproved,它只有一个 getter... 这很奇怪。可能这个错误是在其他地方抛出的,因为理论上我们最初并没有设置这个值,所以错误应该类似于Cannot read property...。您能说明一下您是如何填充boxes 数组的吗?【参考方案2】:

解决方案非常简单。 工作代码是:

在我的 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 
    
  

... 这将返回一个带有数组的数组。每个数组都有一个对象。

现在我们只需从 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 将足以执行任何操作。

【讨论】:

以上是关于从每个 *ngFor ionic 4, ionic 5, ionic 6 获取值的主要内容,如果未能解决你的问题,请参考以下文章

在 Ionic 2 *ngFor 中阻止的 SMS 消息

Ionic 2 - *ngFor 值之间的随机洗牌

*ngFor 模板 Ionic 2 中的对象 [重复]

如何用管道翻译 Ionic/Angular 中 *ngFor 循环的返回

Ionic 4 Angular模板与异步管道绑定到可观察

根据条件在Angular Ionic中使用ngFor突出显示行