Angular 7：更新和删除功能不起作用

时间：2019-10-04 12:33:44

标签： mysql node.js angular

我的主要问题是更新和删除功能在我的Angular产品中不起作用，当我单击按钮时，更新或删除不执行任何操作。

这是一个使用Angular 7的项目，如何在node.js中使用MySQL进行表达和持久化。

希望对您有帮助

Generales-list.component.html：

 <div class="col-md-4" *ngFor="let general of generales">
  <div class="card text-center">
    <div class="card-header bg-dark text-white d-flex justify-content-beetween align-items-center">
      {{general.apellidoPa}} {{general.apellidoMa}} {{general.nombres}}
    </div>
    <div class="card-body">
      <p>{{general.calle}}</p> 
      <p> {{general.nunExt}}</p> 
      <p>{{general.numInt}} </p>
      <p>{{general.colonia}} </p>
      <p>{{general.municipio}} 
      <p>{{general.estado}}</p>
      <p>{{general.fechaNa}}</p>
      <p>{{general.tel}}</p>
      <button type="button" class="btn btn-danger btn-block"  (Click)="deleteTheGenerales(generales.idGenerales)">Eliminar</button>
      <button type="button" class="btn btn-success btn-block" (click)="updateTheGenerales(generales.idGenerales)">Editar</button> 
    </div>
  </div>
</div>

Generales-list.component.ts 

import { Component, OnInit, HostBinding } from '@angular/core';
import {GeneralesService} from '../../service/generales.service';

@Component({
  selector: 'app-generales-list',
  templateUrl: './generales-list.component.html',
  styleUrls: ['./generales-list.component.css']
})
export class GeneralesListComponent implements OnInit {

@HostBinding('class') classes = 'row';
generales: any = [];

  constructor(private generalesService: GeneralesService) { }

  ngOnInit() {
    this.getGenerales();
  }

  getGenerales(){
    this.generalesService.getGenerales().subscribe(
      res => {
        this.generales = res;
      },
      err => console.error(err)
    );
  }//Fin del metodo getGenerales

  deleteTheGenerales(idGenerales: number){
    console.log(idGenerales);
    this.generales.idGenerales;
    this.generalesService.deleteGenerales(idGenerales).subscribe(
      res => {
        console.log(res);
        this.getGenerales();
      },
      err => console.error(err)
    );
  }

  updateTheGenerales(idGenerales: number){
    console.log(idGenerales);
    this.generales.idGenerales;
    this.generalesService.updateGenerales(this.generales.idGenerales, this.generales).subscribe(
      res => {
        console.log(res);
        this.getGenerales();
      },
      err => console.log(err)
    );
  }//Fin del updateTheGeneral
}

generales.Service.ts：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Generales } from '../models/Generales';
import { Observable } from 'rxjs';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class GeneralesService {

  API_URI = 'http://localhost:3000/api';

  constructor(private http: HttpClient) { }

  getGenerales(){
    return this.http.get(`${this.API_URI}/generales`).pipe(
      catchError(this.handleError)
    );
  }

   getGeneral(idGenerales: number){
    return this.http.get(`${this.API_URI}/generales/${idGenerales}`).pipe(
      catchError(this.handleError)
    );
  }

  saveGeneral(general: Generales){
    return this.http.post(`${this.API_URI}/generales`,general).pipe(
  catchError(this.handleError)
    );
  }

  updateGenerales(idGenerales: number, updateGenerales: Generales):Observable<Generales> {
    return this.http.put(`${this.API_URI}/generales/${idGenerales}`, updateGenerales).pipe(
      catchError(this.handleError)
    );
  }

  deleteGenerales(idGenerales: number){
    return this.http.delete(`${this.API_URI}/generales/${idGenerales}`).pipe(
      catchError(this.handleError)
    );
  }

  //Errores para el hadleError
  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent){
      console.error("Ocurrio un Error: ",error.error.message);
    } else {
      console.error(`Codigo de Retorno del BackEnd ${error.status}, `+`Body was: ${error.error}`);
    }
    return throwError("Algo no anda bien, intenta mas tarde"); 
   }
}

错误：

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
generales-list.component.ts:44 undefined
generales.service.ts:52 Codigo de Retorno del BackEnd 0, Body was: [object ProgressEvent]
push../src/app/service/generales.service.ts.GeneralesService.handleError @ generales.service.ts:52
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error @ catchError.js:34
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError @ OuterSubscriber.js:13
push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error @ InnerSubscriber.js:18
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
onError @ http.js:1661
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17290
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
error (async)
customScheduleGlobal @ zone.js:1883
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:264
(anonymous) @ zone.js:2054
(anonymous) @ http.js:1714
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:11
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchOperator.call @ catchError.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../src/app/components/generales-list/generales-list.component.ts.GeneralesListComponent.updateTheGenerales @ generales-list.component.ts:46
eval @ GeneralesListComponent.html:20
handleEvent @ core.js:23107
callWithDebugContext @ core.js:24177
debugHandleEvent @ core.js:23904
dispatchEvent @ core.js:20556
(anonymous) @ core.js:21003
(anonymous) @ platform-browser.js:993
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17290
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
Show 29 more frames
generales-list.component.ts:51 Algo no anda bien, intenta mas tarde
:3000/api/generales/undefined:1 PUT http://localhost:3000/api/generales/undefined net::ERR_EMPTY_RESPONSE

1 个答案:

答案 0 :(得分：1)

应该可以，但是我认为您输错了这一行。

（click）=“ updateTheGenerales（常规 .idGenerales）”

根据您的ngFor进行重写（让一般通用）

（click）=“ updateTheGenerales（常规 .idGenerales）”

相关问题
最新问题