我试图让 ionic 2 应用程序的用户删除列表项。 使用 Angular 使用 Firebase 构建

Question

The below code shows my create a list method, the HTML and the delete method. I am struggling to get the delete method working. I get the error 'remove is undefined'? I am not sure If I have to add the $key in the delete method?

//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 Image

Answer 1

You have some mistakes in your code.You probably wanted to use *ngFor="let list of lists" // lists is the array or collection on which you want to use the loop and list is just a reference(which you could use anything) of the items present inside the lists collection

Second mistake is that inside the delete function you should use the reference you are using to reference you firebase database in your case you should have used this.listRef not list

for deleting you could use something like this(assuming you have keys inside your list(firebase keys))

<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>

It is always advisable to use service for these operations as you will have all your firebase related operations and ref at one central place and you could easily use it from any page.

The simplest way to delete data is to call remove() on a reference to the location of that data(from firebase docs) so you can use this to delete the selected item from the firebase storage:

you can get the authenticated user or current logged in user from:

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;
}

then delete:

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

Answer 2

First thing is you write wrong *ngFor="let list of list" It's written like this *ngFor="let list of lists" . Remove method also not there so I give and example:

<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>

On typescript only Write That

First Make Privoder and Import It.

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);
    }
}