如何在离子/角度

编程问答 2022-08-23

问题描述

我正在将一些数据传递到Ionic / Angular应用程序的模式窗口中，但是我无法根据数据预先选择选择选项。

在模态的父级中，我使用componentProps将数据从父级传递到模态，如下所示：

async editimage(imageID) {
    const modal = await this.modalController.create({
      component: EditimagePage,componentProps: {
        data: this.imageMetaData
      }
    });
    await modal.present();

    const { data } = await modal.onWilldismiss();
    if (data) {
      console.log(data);
    }
  }

我传递给模式的数据的结构如下：

this.data = {
  albums: ["39902"],user_id: "49"
}

这是一些来自我的API的模拟数据：

{
    "albums": [{
        "album": [{
            "albumID": "27508","userID": "49","albumName": "Marvel Comics","count": "123"
        }]
    },{
        "album": [{
            "albumID": "27509","albumName": "Baseball","count": "77"
        }]
    },{
        "album": [{
            "albumID": "33670","albumName": "Basketball","count": "4"
        }]
    },{
        "album": [{
            "albumID": "39902","albumName": "Football","count": "331"
        }]
    },{
        "album": [{
            "albumID": "39968","albumName": "Hockey","count": "1,552"
        }]
    },{
        "album": [{
            "albumID": "40585","albumName": "Test Album Name","count": "0"
        }]
    }]
}

在我的模式中，我调用我的API服务以获取如下数据：

this.api.getAlbums().subscribe(response => {
  this.albums = response['albums'];
});

在我的模板中，我尝试显示如下所示的选定值：

<ion-item lines="full">
      <ion-label class="ion-text-wrap">Album</ion-label>
      <ion-select multiple="true" [(ngModel)]="data.albums">
        <ion-select-option *ngFor="let item of albums" [value]="item.album[0].albumID">{{item.album[0].albumName}}</ion-select-option>
      </ion-select>
    </ion-item>

页面加载时，未选择下拉列表的值，但是，如果我单击下拉列表，则选择了正确的值。

是否有办法从this.data中获取所选值以使其显示在下拉菜单中？

任何可以帮助从Ionic下拉菜单中删除那些愚蠢的椭圆形的人的奖励积分。

解决方法

您的问题可能与竞争状况有关：也许Ionic正在提取albums数据的请求完成之前呈现选择组件。

这就是为什么如果您静态设置albums变量，它将在第一次运行的原因。

为避免出现此问题，您可以做的一件事是在离子选择组件上定义一个*ngIf，当albums到达时将被评估为true：

    <ion-item lines="full">
      <ion-label class="ion-text-wrap">Album</ion-label>
      <ion-select multiple="true" [(ngModel)]="data.albums" *ngIf="!!albums">
        <ion-select-option *ngFor="let item of albums" [value]="item.album[0].albumID">{{item.album[0].albumName}}</ion-select-option>
      </ion-select>
    </ion-item>

请注意，如果在获取albums时出错，则需要提供一些后备。例如，在这种情况下，您可以将变量设置为空数组。

此外，如果提取albums的请求很慢，则此解决方案可能会产生某种闪烁效果。如果发生这种情况，您将需要在页面中包含某种微调器。

您的data.albums变量中将至少包含一个相册本身的名称，而不仅仅是名称。我想说：

data.albums = [{"albumID": "39902","albumName": ""},...]

这将允许您预加载相册选择器，直到获得实际的albums信息为止。

最后，您可以尝试在albums数据到达时强制进行更改检测：

this.api.getAlbums().subscribe(response => {
  this.albums = response['albums'];
  this.cd.markForCheck();
});

成为cd的实例。

angularionic-frameworkionic4