时间戳

首页 > 解决方案 > 更新数据时刷新离子选择选项的问题

ionic-framework - 更新数据时刷新离子选择选项的问题

问题描述

我正在开发一个 Ionic 应用程序（v.4 最终版本）...

我的问题：我有一个<ion-select>并且这个选择有一个列表<ion-select-option>，并且这个选项是通过 *ngFor 创建的...问题是：当我更改数组时，删除一个元素，例如，ionc-select-options 不能重新-渲染这个数组的新状态。

<ion-select>
  <ion-select-option *ngFor="let question of questions">{{ question }}</ion-select-option>
</ion-select>

（我正在更新问题数组）有什么想法吗？

更新： 如果将 *ngFor 放在其他元素中，例如 div，它可以正常工作：

示例：（删除第一个元素时没有更新）

<ion-select>
  <ion-select-option *ngFor="let question of questions">{{ question }}</ion-select-option>
</ion-select>
<button (click)="deleteFirst()>Delete first!</button>

（当我删除第一个元素时它正在更新）

<div *ngFor="let question of questions"></div>
<button (click)="deleteFirst()>Delete first!</button>

class MyComponent() {

      public questions = ['question1','question2','question3'];


      deleteFirst() {
        this.questions.splice(0, 1);
      }
    }

标签： ionic-frameworkionic4

解决方案

您正在使用splice 方法会更改数组的内容，但不会更改其引用。

换句话说，您应该使用不可变对象/数组，并在需要进行更改时创建新实例。

在你的情况下：

deleteFirst() {
  if (this.questions.length) {
     this.questions = this.questions.filter((el, index) => index > 0);
  }
}

此处过滤器返回对包含满足条件的对象的数组的新引用

推荐阅读