Question

在我的角度程序中，我有一个删除按钮，只要点击它就会从表和数据库中删除一行。我觉得我所拥有的代码应该绝对有效，但我不确定为什么它不会。

编辑 - 更具体地说，每当我在浏览器中运行程序并点击删除按钮时，没有任何反应，但我也没有收到控制台错误。每当我点击删除按钮时，在控制台窗口中，它只会以Object {ID: 177901, EmpKey: 1, type: "PTO", etc.}形式打印出该行中项目的详细信息，这是该行的内容。但是，为什么不从表中删除？

这是我的.ts：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { PTOData } from './pto-data';
import { PTODataService } from './pto-data.service';

@Component({
    selector: '[pto-row-edit]',
    templateUrl: `./row-edit.component.html`,
    styleUrls: ['./row-edit.component.css']
})

export class RowEditComponent {
    @Input() pto: PTOData;
    @Output() onDelete = new EventEmitter<number>();

    constructor(
        private ptodataService: PTODataService,) { }

    saveRow(p : PTOData): void {
        this.ptodataService.update(p)
    }

    deleteRow(currPTO: PTOData): void {
        console.log(this.pto);
        this.ptodataService
            .delete(currPTO.ID)
            .then(() => {
                this.onDelete.emit(currPTO.ID);
            })
    }
}

我的.html

<td><input class='form-control' type="date" id="ptoDate" [ngModel]="pto.date | date: 'yyyy-MM-dd'" (ngModelChange)="pto.date=$event" name="ptoDate" /></td>
<td>
  <select class="form-control" id="ptoFullHalf" [(ngModel)]="pto.fullhalf" name="ptoFullHalf">
    <option value="full">Full</option>
    <option value="AM">AM</option>
    <option value="PM">PM</option>
    <option value="(full)">(Full)</option>
    <option value="(half)">(Half)</option>
  </select>
</td>
<td>
  <select class="form-control" id="ptoHours" [(ngModel)]="pto.hours" name="ptoHours">
    <option value="4">4</option>
    <option value="8">8</option>
    <option value="-4">-4</option>
    <option value="-8">-8</option>
  </select>
</td>
<td>
  <select class="form-control" id="ptoScheduled" [(ngModel)]="pto.scheduled" name="ptoScheduled">
    <option value=""></option>
    <option value="advanced">Advanced</option>
    <option value="scheduled">Scheduled</option>
    <option value="unscheduled">Unscheduled</option>
  </select>
</td>
<td><input class='form-control' type="text" id="ptoNotes" [(ngModel)]="pto.notes" name="ptoNotes" /></td>
<td>
  <input class="form-check-input" type="checkbox" id="ptoinPR" [(ngModel)]="pto.inPR" name="ptoinPR" />
</td>
<td>
  <button class="btn btn-default btn-primary" style="float:right;" (click)="deleteRow(pto)" (onDelete)="onDelete($event)"><i class="fa fa-trash" aria-hidden="true"></i></button>
  <button class="btn btn-default btn-primary" style="float:right;"><i class="fa fa-ban" aria-hidden="true"></i></button>
  <button class="btn btn-default btn-primary" style="float:right;" (click)="saveRow(pto)"><i class="fa fa-check" aria-hidden="true"></i></button>
</td>

和我的服务

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';

import 'rxjs/add/operator/toPromise';


import { PTOData } from './pto-data';

@Injectable()

export class PTODataService {
    private headers = new Headers({ 'Content-Type': 'application/json' });
    private ptoDateUrl = 'api/PTOData';

    constructor(private http: Http) { }

    getPTODatas(): Promise<PTOData[]> {
        return this.http.get(this.ptoDateUrl)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    delete(ID: number): Promise<void> {
        return this.http.get(this.ptoDateUrl)
            .toPromise()
            .then(() => null)
            .catch(this.handleError);
    }

    update(pto: PTOData): Promise<PTOData> {
        return this.http
            .put(this.ptoDateUrl, JSON.stringify(pto), { headers: this.headers })
            .toPromise()
            .then(() => pto)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

Answer 1

您正在使用get in service删除方法

return this.http.get(this.ptoDateUrl)

您可能想要使用http.delete ...

角度 - 删除按钮不起作用

1 个答案: