我正在尝试让Ionic 2应用程序的用户删除列表项.使用firebase使用Angular构建

Question

以下代码显示我的创建列表方法，html和删除方法。我正在努力使删除方法有效。我遇到了"删除是不确定的"错误？我不确定是否必须在删除方法中添加$键？

//Delete method, this is the method I am struggling. i want a user to be able to delete the list item on slide
deleteList(list) {
    list.remove(list);
   }
//HTML
<ion-list>
     <ion-item-sliding *ngFor="let list of list" >
         <ion-item>
           <p>An item:
             <strong>{{list.list1}}</strong>
           </p>
           <p>Oooooh is this important:
             <strong>{{list.list2}}</strong>
           </p>
            <p>Another item:
             <strong>{{list.list3}}</strong>
            </p>    
       </ion-item>
         <ion-item-options side="left">
             <button ion-button color="danger" (click)="deleteList(list.$key)">
                <ion-icon name="md-trash">Delete</ion-icon>
             </button>
        </ion-item-options>
       </ion-item-sliding>
    </ion-list>
//Create list
  firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.listRef = firebase
          .database()
          .ref(`/userProfile/${user.uid}/List`);
      }
    });
  }
    createList(
    list1: string,
    list2: string,
    list3: string
  ): ThenableReference {
    return this.listRef.push({
      list1: list1,
      list2: list2,
      list3: list3,
    });
  }

firebase图像

Answer 1

您在代码中有一些错误。列表只是列表集合中存在的项目的引用(您可以使用任何内容(

第二个错误是，在删除函数中，您应该使用所使用的参考来引用您的firebase数据库，在您的情况下，您应该使用此。

用于删除您可以使用类似的东西(假设您的列表中有密钥(firebase键((

<ion-item-options side="left">
  <button ion-button color="danger" (click)="deleteList(list.$key)">
    <ion-icon name="md-trash">Delete</ion-icon>
  </button>
</ion-item-options>

始终建议将服务用于这些操作，因为您将在一个中心位置进行所有相关的操作和参考，并且您可以轻松地从任何页面使用它。

删除数据的最简单方法是在引用该数据的位置(来自firebase docs(时调用remove((因此，您可以使用它从Firebase存储中删除所选项目：

您可以从：

中获取身份验证的用户或当前登录的用户

import { User } from 'firebase/app'; // import user from firebase
authenticatedUser: User; //declare variable authenticatedUser as type User
firebase.auth().onAuthStateChanged(user => {
  if (user) {
    this.authenticatedUser = user;
}

然后删除：

deleteList(key) {
firebase
   .database()
    .ref(`/userProfile/${this.authenticatedUser.uid}/List/${key}`).remove()
}

Answer 2

第一件事是您写错误的*ngFor="let list of list"它像这个*ngFor="let list of lists"一样写。删除方法也不存在，所以我给出示例：

<ion-list>
<ion-item-sliding *ngFor="let item of shoppingItems | async">
  <ion-item>
    {{ item.$value }}
  </ion-item>
  <ion-item-options side="right">
    <button ion-button color="danger" icon-only (click)="removeItem(item.$key)"><ion-icon name="trash"></ion-icon></button>
  </ion-item-options>
</ion-item-sliding>

在打字稿上只写

首先制作私有机并导入它。

import { DatabaseserviceProvider } from './../../providers/databaseservice/databaseservice';
constructor(public firebaseProvider: DatabaseserviceProvider)
removeItem(id) {
    this.firebaseProvider.removeItem(id);
}

databaseservice.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
// import { AngularFire, FirebaseObjectObservable, AngularFireAuth, FirebaseListObservable } from 'angularfire2';
@Injectable()
export class DatabaseserviceProvider {
    constructor (
        public http: Http,
        // private _af: AngularFire,
        public afd: AngularFireDatabase) {
        console.log('Hello Database serviceProvider Provider');
    }
    getShoppingItems() {
        return this.afd.list('/shoppingItems/');
    }
    addItem(name) {
        this.afd.list('/shoppingItems/').push(name);
    }
    removeItem(id) {
        this.afd.list('/shoppingItems/').remove(id);
    }
}