Delete a record in angle 5 by passing the user_id?

Question

Delete a record in angle 5 by passing the user_id?

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I want to delete a record by passing the user id using httpclient my api from postman I pass the 1 as parameter and I delete the record but in angular nose this is my code

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'
import { HttpClient } from '@angular/common/http';


@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.css']
})
export class MainComponent {

    archivo: Array<any>;

    constructor(private _http: HttpClient) {
        this.conseguir();
        console.log(this.archivo);
    }

    conseguir() {
        const url = 'http://localhost/api/public/archivo';

        this._http.get(url).subscribe(data => {
            this.archivo = data;
        }, error => {
            console.log('error');
        })
    }

    borrar(archivo) {
        const urls = 'http://localhost/api/public/delete/${archivo.user_id}';

        this._http.delete(urls).subscribe(data => {
            console.log('se ha borrado correctamente');
        }, error => {
            console.log('error');
        });
    }
}

in my html I have the click event

<main>

<div *ngFor="let datos of archivo" class="card" style="width: 20rem;">
 <img class="card-img-top" [src]="'/assets/img/'+ datos.imagen" alt="Card 
 image cap">
 <div class="card-body">
<h5 class="card-title">{{datos.titulo}}</h5>
<h5 class="card-title">{{datos.user_id}}</h5>
<p class="card-text">{{datos.descripcion}}</p>

<i (click)="borrar(???????)" class="material-icons">delete</i>

 </div>
 </div>

my tables in the database

The get function returns all the data in the table and stores it in the file variable

typescript angularjs-2.0 angular4

asked by ortiga 27.02.2018 в 16:24

source

2 answers

1

You have several problems in the code:

Your class has an attribute archivo , but you declare it as an array. Should it be archivos ? Should it be a single object?

Your method borrar(archivo) {...} expects a parameter, but you are not passing any by clicking on the element. Do you have the parameter and do you want to refer to the attribute or have you forgotten to pass it as an index to know which file of your array you want to delete?

answered by 27.02.2018 в 16:32

Add node to a linked list and write the list in a .csv file? Spring MVC Pass messages to the view

score 2 · Accepted Answer

In your HTML , you should have something like this:

<div *ngFor="let datos of archivo" class="card" style="width: 20rem;">
  <img class="card-img-top" [src]="'/assets/img/'+ datos.imagen" alt="Card 
   image cap">
  <div class="card-body">
    <h5 class="card-title">{{datos.titulo}}</h5>
    <h5 class="card-title">{{datos.user_id}}</h5>
    <p class="card-text">{{datos.descripcion}}</p>

    <i (click)="borrar(datos)" class="material-icons">delete</i>
  </div>
</div>

And your function to erase, refactoring it a bit so that it is better:

borrar(archivoParaBorrar) {
        const url = 'http://localhost/api/public/delete/${archivoParaBorrar.user_id}';

       this._http.delete(url).subscribe(data => {
          console.log('se ha borrado correctamente');
          let index = archivo.indexOf(archivoParaBorrar, 0);
          if (index > -1) {
            archivo.splice(index, 1); // Tu array de archivos
         }
       }, error => {
        console.log('error');
      });           
}

As you can see, if the request is successful, remove the object from your Array.

Speaking a bit about good practices:

You should define a service to perform http requests, whatever the type.