Question

在我的Angular应用程序中，我为列表中的每个客户提供了删除方法：

在客户资源组件中：

delete2(id: string) {
        this.customerService.delete2(id);
        this.synchronize();
    }

在客户资源视图中：

<mat-cell *matCellDef="let row; let item;">
<button mat-icon-button color="accent" (click)="delete(item.id)">
                    <mat-icon aria-label="Delete">delete</mat-icon>
                  </button>

在客户服务中：

@Injectable()
export class CustomerService {
    static END_POINT = '/customers';

constructor(private httpService: HttpService, public snackBar: MatSnackBar) {
    }

readAll(): Observable<Customer[]> {
        return this.httpService.get(CustomerService.END_POINT);
    }

delete2(id: string) {
        this.httpService.delete(CustomerService.END_POINT + '/' + id).subscribe(
            () => { this.readAll();
                this.successful();
            }
        );
    }

最后，客户服务使用的HttpService：

@Injectable()
export class HttpService {

    static API_END_POINT = 'http://localhost:8080/api/v0';

    private params: URLSearchParams;

    private headers: Headers;

    private responseType: ResponseContentType;

    constructor(private http: Http) {
        this.params = new URLSearchParams();
        this.headers = new Headers();
    }

    param(key: string, value: string): HttpService {
        this.params.append(key, value);
        return this;
    }

    header(key: string, value: string): HttpService {
        this.headers.append(key, value);
        return this;
    }

get(endpoint: string): Observable<any> {
        return this.http.get(HttpService.API_END_POINT + endpoint, this.createOptions()).map(
            response => this.extractData(response)).catch(
                error => {
                    return this.handleError(error);
                });
    }

delete(endpoint: string): Observable<any> {
        return this.http.delete(HttpService.API_END_POINT + endpoint, this.createOptions()).map(
            response => this.extractData(response)).catch(
                error => {
                    return this.handleError(error);
                });
    }

private createOptions(): RequestOptions {
        const options: RequestOptions = new RequestOptions({ headers: this.headers, params: this.params });
        this.headers = new Headers();
        this.params = new URLSearchParams();
        return options;
    }

    private extractData(res: Response): any {
        if (res.text()) {
            if (res.headers.get('content-type').indexOf('application/json') !== -1) {
                return res.json();
            } else {
                return res.text();
            }
        } else {
            return res;
        }
    }

但是当我尝试删除现有客户时，我收到了下一个错误：

获取http://localhost:8080/api/v0/customers/undefined 404（）

未定义，路径：/ api / v0 / customers / undefined

虽然我已经查看了代码，但我并不了解＆＃34; undefined＆＃34;错误是，因为我发送＆＃34; id＆＃34;而且我没有创建新客户的后端问题。

更新：

我已更正错误并删除了客户，但现在我尝试通过确认取消/是对话框来执行此操作。

因此，在资源组件中，我的delete2（）方法已更改为：

delete2(customer: Customer) {
        this.customerService.readObservable(customer.id).subscribe(
            data => {
                const dialogRef = this.dialog.open(CustomerDeleteDialogComponent);
                dialogRef.componentInstance.customer = data;
                dialogRef.afterClosed().subscribe(
                    result => this.synchronize()
                );
            }
        );
    }

视图代码已更改为：

<button mat-icon-button color="accent" (click)="delete2(item)">
                    <mat-icon aria-label="Delete">delete</mat-icon>
                  </button>

删除确认对话框组件为：

export class CustomerDeleteDialogComponent implements OnInit {
    customer: Customer;

    constructor(private customerService: CustomerService,
        public dialogRef: MatDialogRef<CustomerDeleteDialogComponent>) { }

    delete2(): void {
        this.customerService.delete2(this.customer.id);
        this.dialogRef.close();
    }

    ngOnInit(): void {
        if (!this.customer) {}
        this.customer = { id: undefined, name: '', address: '', date: undefined };
    }

继续观察下一个：

<mat-dialog-content>
    <mat-icon color="warn">warning</mat-icon> <h3>Confirm: Delete Customer. Are you sure?</h3>
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-raised-button mat-dialog-close cdkFocusInitial color="primary">Cancel</button>
    <button mat-raised-button [mat-dialog-close]="true"  (click)="delete2()">Ok. Delete</button>
</mat-dialog-actions>

最后，来自客户服务的readObservable（）方法是：

readObservable(id: string): Observable<Customer> {
        return this.httpService.get(CustomerService.END_POINT + '/' + id);
    }

现在，问题是：当我选择删除客户时，它会显示对话框，但当我点击确定（删除）时，客户仍然存在虽然我得到了成功的小吃店＆＃34;为客户服务中的方法delete2（）启动。无论如何，我认为问题可能与readObservable（）有关。另外，现在我没有在控制台中收到错误。

Answer 1

item.id

这是一个未定义的变量。你确定，你的物品有那个＆＃34; id＆＃34;属性？正如我所见，你创建了item对象，但它还没有任何意义。

Angular Undefined路径？

1 个答案: