Javascript 我试图让爱奥尼亚2应用程序的用户删除列表项。使用Firebase和Angular构建

下面的代码显示了我的createaslist方法、HTML和delete方法。我正在努力使delete方法工作。我得到错误“删除未定义”？我不确定是否必须在delete方法中添加$key

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

//删除方法，这是我正在努力的方法。我希望用户能够删除幻灯片上的列表项
删除列表（列表）{
列表。删除（列表）；
}
//HTML
一项：
{{list.list1}}

这很重要吗
{{list.list2}

另一项目：
{{list.list3}}

删除
//创建列表
firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
this.listRef=firebase
.数据库（）
.ref（`/userProfile/${user.uid}/List`）；
}
});
}
创建列表(
列表1：字符串，
清单2：字符串，
清单3：字符串
)：表格参考{
返回此.listRef.push({
列表1:列表1，
列表2:列表2，
清单3：清单3，
});
}

---

第一件事是你写错了

*ngFor=“让列表列表”

它是这样写的

*ngFor=“let list of list”

。 Remove方法也不存在，因此我给出以下示例：

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

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

---

您的代码中有一些错误。您可能想使用*ngFor=“let list of list”//lists是要在其上使用循环的数组或集合，而list只是列表集合中存在的项的引用（您可以使用任何内容）

第二个错误是，在delete函数中，您应该使用您用于引用firebase数据库的引用。在您的情况下，您应该使用this.listRef not list

对于删除，您可以使用类似的方法（假设您的列表中有键（firebase键））

然后删除：

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

---

删除功能在哪里？您想从firebase存储中从何处删除它？是的，从firebase数据库中删除谢谢您的帮助，所以我在provider类中使用删除函数，而不是list类？是的，如果您使用provider类以方便随时随地使用，请使用它，它的编写方式如下*ngFor=“let list of list”。当用户使用唯一ID登录时，这不会删除其节点列表？我将firebase.auth（）放在何处？onAuthStateChanged（user=>{if（user）{this.authenticatedUser=user；}如果您在一个ts文件中执行所有操作，请将其放在构造函数或ionic的ionViewDidLoad（）中方法当我将它放入公共列表：数组；构造函数（公共navCtrl:NavController，公共eventProvider:eventProvider）{}ionViewDidLoad（）{this.eventProvider.getlist（）.on（'value'，listSnapshot=>{this.list=[]；listSnapshot.forEach（snap=>{this.list.push）中时，我遇到了一个错误({id:snap.key，list1:snap.val（）.list1，list2:snap.val（）.list2，list3:snap.val（）.list3}）；return false；}）；}）；}当我将-“；”放入构造函数中时，它丢失了……它在多个位置上说这是被捕获的（承诺中）：ReferenceError:firebase未定义ReferenceError: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>

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