角度未定义路径？

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;
        }
    }

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

GEThttp://localhost:8080/api/v0/customers/undefined404()

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

虽然我已经查看了代码，但我不明白“未定义”错误在哪里，因为我发送了“id”并且我在创建新客户方面没有后端问题。

更新：

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

所以，在资源组件中，我的 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);
    }

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

Answer 1

item.id

这是一个未定义的变量。您确定您的商品具有“id”属性吗？正如我所见，您创建了 item 对象，但它还没有任何意义。