如何从离子列表中删除离子项目？

Posted 2023-03-13

【中文标题】如何从离子列表中删除离子项目？

【英文标题】：How to delete an ion-item from ion-list?

【发布时间】：2022-01-15 16:24:04

【问题描述】：

我正在尝试为存储在 Firestore 实例中的离子列表中的离子项目实现删除功能。我试图用.splice() 函数解决它，但这会引发以下错误：

'Observable'.ts(2339) 类型上不存在属性'splice'

有人知道如何解决这个问题吗？

代码如下所示：

HTML

  <ion-item-sliding *ngFor="let space of spaces | async; let i = index">
    <ion-item>
      <ion-icon name="ellipse-outline"></ion-icon>
      <ion-label>
        &nbsp;  space.spaceName 
      </ion-label>
    </ion-item>
    <ion-item-options (ionSwipe)="deleteSpace(i)">
      <ion-item-option color="success" (click)="editspacenameModal()"> 
        Edit
      </ion-item-option>
      <ion-item-option color="danger" (click)="deleteSpace(i)" expandable> 
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

TS

export class ActivitiesPage implements OnInit 

  spaces: Observable<any[]>; 

...

deleteSpace(i) 
    this.spaces.splice(i,1);
    console.log('deleteSpace() called')
  

【参考方案1】：

我是这样解决的：

HTML

<ion-item-sliding *ngFor="let space of spaces | async">
    <ion-item detail>
      <ion-icon name="ellipse-outline" start></ion-icon>
      <ion-label>
        &nbsp;  space.spaceName 
      </ion-label>
    </ion-item>
    <ion-item-options (ionSwipe)="deleteSpace(space)">

      <ion-item-option color="success" (click)="editspaceModal(space)"> Edit </ion-item-option>
      <ion-item-option color="danger" (click)="deleteSpace(space)" expandable> Delete </ion-item-option>
    
    </ion-item-options>
  </ion-item-sliding>

TS

  deleteSpace(space: Space): void 
    console.log('space.id',space)
      this.setisDeleted(space);
  

  setisDeleted(space): Promise<any> 

    const isDeleted = true;
    
    return this.angularFirestore
    .collection('accounts')
    .doc(this.userId)
    .collection("spaces")
    .doc(space.spaceId)
    .update( isDeleted )
  v

【参考方案2】：

您需要过滤实际的数组，而不是围绕它的 observable。因此，您会将 Observable 的内容（它是一个 any[]）映射到过滤后的 spaces。

  deleteSpace(i) 
    this.spaces = this.spaces.pipe(
            map(result => result.filter((r, index) => i !== index))
        )
    console.log('deleteSpace() called')
    this.spaces.subscribe((out) => console.log(out))
  

在map 运算符中使用filter 将解决您的问题。

【讨论】：

这行得通:) 但是有没有办法在 Firestore 中为这个特定项目设置 isDeleted 标志？否则，该项目将在重新加载后再次显示。

【参考方案3】：

一种方法是转换您的 observable 并将其过滤掉：

在这里阅读更多：

https://developer.mozilla.org/de/docs/Web/javascript/Reference/Global_Objects/Array/filter

const data = this.yourdata.filter(item => item.property !== desiredvalue)

您还可以检测列表中的变化并直接过滤 observable。

在这里阅读更多：

https://www.learnrxjs.io/learn-rxjs/operators/filtering/filter

也许这个问题对你有帮助：

how to filter an Observable array?