Question

我正在开发Ionic应用程序（第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);
      }
    }

Answer 1

您使用的splice method会更改数组的内容，但不会更改其引用。

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

在您的情况下：

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

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

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

1 个答案: