Delete function does not take parameter value

Question

code provided could be compiled but the delete function does not work

Using console.log('{alarm.id}'); the alarm.id does not display its value but string. however if i add quotes to the code like 'alarms/${' & 'alarm.id' & '}' it could not compile

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>

I expect with your help the delete function would work. without disrupting the other code. and i hope you dont just come here to correct my english. full code at https://github.com/iceraft/LimitRemoval.

delete(alarm) here is most likely confused with JS delete operator — zerkms
– zerkms, Commented Apr 4, 2019 at 0:00
I tried changing delete(alarm) to deletes(alarm) and delThis(alarm) still no luck ty anyway @zerkms — Fuyu KuKie
– Fuyu KuKie, Commented Apr 4, 2019 at 3:26
This doesn't seem to be a minimal reproducible example so it's hard for others to test easily. Maybe your problem is that you are trying to use template literals but you are using single quotes ' instead of the required backquotes ` . — jcalz
– jcalz, Commented Apr 4, 2019 at 14:44
concerning the backquote i already tried using it... sadly it wasn't the problem, are there other files you suggest i should include? — Fuyu KuKie
– Fuyu KuKie, Commented Apr 4, 2019 at 15:21

deanz · Accepted Answer · 2019-04-04 15:59:17Z

1

Can you try this

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

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

}

answered Apr 4, 2019 at 15:59

deanz

1662 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Delete function does not take parameter value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related