El siguiente código muestra mi método de creación de una lista, el HTML y el método de eliminación. Estoy luchando para que funcione el método de eliminación. ¿Recibo el error "eliminar no está definido"? No estoy seguro de si tengo que agregar la tecla $ en el método de eliminación.

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

Imagen de Firebase

0
UKbound 14 feb. 2018 a las 12:27

2 respuestas

La mejor respuesta

Tiene algunos errores en su código. Probablemente quisiera usar * ngFor = "dejar lista de listas" // listas es la matriz o colección en la que desea usar el ciclo y la lista es solo una referencia (que puede usar cualquier cosa ) de los elementos presentes dentro de la colección de listas

El segundo error es que dentro de la función de eliminación, debe usar la referencia que está usando para hacer referencia a su base de datos de base de fuego en su caso, debería haber usado this.listRef not list

Para eliminar, puede usar algo como esto (suponiendo que tenga claves dentro de su lista (claves de base de fuego))

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

Siempre es recomendable usar el servicio para estas operaciones, ya que tendrá todas las operaciones relacionadas con la base de fuego y las referencias en un lugar central y podrá usarlo fácilmente desde cualquier página.

La forma más sencilla de eliminar datos es llamar a remove () en una referencia a la ubicación de esos datos (de los documentos de firebase) para que pueda usar esto para eliminar el elemento seleccionado del almacenamiento de firebase:

Puede obtener el usuario autenticado o el usuario que ha iniciado sesión actualmente en:

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

Luego borre:

deleteList(key) {
firebase
   .database()
    .ref(`/userProfile/${this.authenticatedUser.uid}/List/${key}`).remove()
}
0
Mahesh Jadhav 15 feb. 2018 a las 14:45

Lo primero es que escribiste mal *ngFor="let list of list" Está escrito así *ngFor="let list of lists". El método de eliminación tampoco está allí, así que doy un ejemplo:

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

Solo en texto mecanografiado Escribe eso

Primero haga Privoder e impórtelo.

import { DatabaseserviceProvider } from './../../providers/databaseservice/databaseservice';

constructor(public firebaseProvider: DatabaseserviceProvider)

removeItem(id) {
    this.firebaseProvider.removeItem(id);
}

Databaseervice.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);
    }
}
-1
Asken 15 feb. 2018 a las 08:37