Question

提供的代码可以编译，但删除功能不起作用

使用console.log（'{alarm.id}'）; alarm.id不显示其值，而是字符串。但是，如果我在代码中加上“ alarms / $ {”和“ alarm.id”和“}”之类的引号，它将无法编译

alarm.page.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
import { ModalController } from '@ionic/angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { AlarmAddPage } from './alarm-add/alarm-add.page';


@Component({
  selector: 'app-alarm',
  templateUrl: './alarm.page.html',
  styleUrls: ['./alarm.page.scss'],
})
export class AlarmPage implements OnInit {

  alarms = [];

  constructor(private db: AngularFirestore,
              private modalCtrl: ModalController,
              public afAuth: AngularFireAuth,) { }


  ngOnInit() {
    this.alarms=[];
    this.db.collection('alarms').stateChanges().subscribe(serverAlarms =>{
      serverAlarms.forEach(a=>{
        let alarm:any = a.payload.doc.data();
        alarm.id = a.payload.doc.id;
        this.alarms.push(alarm);
      });

    });


  };



  async add() {
    const modal = await this.modalCtrl.create({
      component: AlarmAddPage,
      backdropDismiss: false,
    });
    return await modal.present();
  }

  delete(alarm){
      this.db.doc('alarms/${alarm.id}').delete();
      console.log('{alarm.id}');
  }

}

alarm.page.html

<ion-header>
<ion-toolbar color="dark">
      <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Alarms 
    </ion-title>    
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let alarm of alarms">
      <table><tr><th><h2>{{alarms.time}} &nbsp;&nbsp;</h2></th><td><table><tr><td>{{alarm.id}}</td></tr><tr><td>{{alarms.days}}</td></tr></table></td></tr></table>
      <ion-button (click)="delete(alarm)" color="light">Delete</ion-button>
    </ion-item>
    </ion-list>
  <ion-col>
      <div class="ion-text-center">
        <ion-button (click)="add()" color="light">Add Alarms</ion-button>
      </div>
  </ion-col>
</ion-content>

我希望在您的帮助下删除功能将起作用。而不破坏其他代码。我希望你不要只是来这里纠正我的英语。完整的代码位于https://github.com/iceraft/LimitRemoval。

Answer 1

您可以尝试

<ion-button (click)="delete(alarm.id)" color="light">Delete</ion-button>

delete(alarm){
  this.db.doc('alarms/'+alarm).delete();
  console.log(alarm);

}

删除功能不使用参数值

1 个答案: