Question

我真的不知道该如何表达我的问题，因为它对Ionic和混合应用程序开发尚不陌生，但我会尽力而为。我正在开发应用程序，并且想通过单击另一个按钮来打开ion-select字段。

它有些起作用，但是如果单击的条目不是第一个条目，它不会删除正确的条目。

我的HTML代码如下：

account.page.html

<div class="account-drop-wrapper" *ngFor="let item of myDrops">
  <div class="account-item">
    <div class="account-content" [routerLink]="['/drop', item.id]">
      <div class="text-content">
        {{ item.description }}
      </div>
      <div class="drop-score">
        <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
        <p>{{ item.score }}</p>
      </div>
    </div>
      <ion-item class="more-button">
        <ion-icon name="more" class="edit-icon" (click)="openSelect()"></ion-icon>
        <ion-select class="select-field" interface="action-sheet" (ionChange)="showMore(item, $event)" #showSelect>
          <ion-select-option value="delete">Löschen</ion-select-option>
          <ion-select-option value="edit">Bearbeiten</ion-select-option>
        </ion-select>
      </ion-item>
  </div>
</div>

这是我到目前为止的TypeScript：

account.page.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { DropService } from '../../services/drop.service';
    import { Events, IonSelect, NavController } from '@ionic/angular';
    import { AlertController } from '@ionic/angular';


    @Component({
      selector: 'app-account',
      templateUrl: './account.page.html',
      styleUrls: ['./account.page.scss'],
    })
    export class AccountPage implements OnInit {

      allDrops: Drop[];
      myDrops: Drop[];

      @ViewChild('showSelect') selectRef: IonSelect;

      openSelect() {
        this.selectRef.open();
      }

      constructor(private dropService: DropService, 
         public navCtrl: NavController, 
         public events: Events, 
         public alertController: AlertController) { }

      ngOnInit() {
        this.dropService.getDrops().subscribe(res => {
              this.allDrops = res;
          });

        this.dropService.getMyDrops().subscribe(res => {
          this.myDrops = res;
        });
      }

      showMore(item, event) {
        if (event.detail.value === 'delete') {
          this.confirmDelete(item);
        }
      }

      async confirmDelete(item) {
        const alert = await this.alertController.create({
          header: 'Confirm',
          message: 'delete?',
          buttons: [
            {
              text: 'cancel',
              role: 'cancel',
              cssClass: 'secondary'
            }, {
              text: 'delete',
              handler: () => {
                this.dropService.removeDrop(item.id);
              }
            }
          ]
        });
        await alert.present();
      }
    }

我想我需要使每个ion-select都唯一，就像这样：

    <ion-select (ionChange)="showMore(item, $event)" #showSelect{{item.id}}>

但是不幸的是，我不知道实现此目标的正确语法。如果我对自己的猜测有误，有人可以帮助我或纠正我吗？

Answer 1

据我了解，您的页面中有几个ion-select组件，您需要获取某个ion-select的引用才能从您的代码中打开它。

我假设ion-select组件位于*ngFor内

<div *ngFor="let item of allItems" class="some-class">

  <!-- Some other content... -->

  <!-- Send the item to the openSelect() method -->
  <ion-icon name="more" class="edit-icon" (click)="openSelect(item)"></ion-icon>

  <ion-select (ionChange)="showMore(item, $event)" #showSelect>
    <!-- options... -->
  </ion-select>

</div>

如果正确，那么您可以在组件中使用ViewChildren来获取ionSelect组件的所有实例，然后根据其索引找到正确的实例，如下所示：

import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { DropService } from '../../services/drop.service';
import { Events, IonSelect, NavController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-account',
  templateUrl: './account.page.html',
  styleUrls: ['./account.page.scss'],
})
export class AccountPage implements OnInit {

  // Now it's a QueryList of IonSelect instances
  @ViewChildren('showSelect') selectRefs: QueryList<IonSelect>;

  // This is the list of all the items that you use in the ngFor
  public allItems: Array<any>;

  openSelect(item: any) {

    // First find the index of the item in the allItems array
    const targetIndex = allItems.findIndex(someItem => someItem.id === item.id);

    if(targetIndex > -1) {

      // then get the IonSelect from the QueryList using the same index
      const targetIonSelect = this.selectRefs.toArray()[targetIndex];

      if(targetIonSelect) {

        // Now you can open that IonSelect instance
        targetIonSelect.open();

      }

    }

  }

  // ...

}

如何通过循环动态调用函数？

1 个答案: