javascript - MEAN应用出现 Angular 2错误:无法读取未定义的属性_id

我是第一次构建用于存储，更新，查看和删除客户端配置文件的应用程序。我跟随英雄的Angular巡回演出来构建基本应用程序，然后将mongodb拼凑在一起并从网上表达一些内容。

当我尝试删除客户端配置文件时，在浏览器控制台中出现此错误-


  错误TypeError：无法读取未定义的属性'_id'
      在ClientProfileComp.webpackJsonp ... / .. / .. / .. / .. / src / app / components / clientProfile.component.ts.ClientProfileComp.delete
  （clientProfile.component.ts：53）...（等）。


我已经使用邮递员确认我的快递路线可以按预期工作。我能够在/api/clients处获取所有/创建的客户端，以及从/api/clients/:_id处获取，放置和删除（其中_id是每个条目的自动生成的ID）。

我认为问题出在我的一个组件文件中，因为仅当我尝试删除或查看特定的客户详细信息时才会发生错误，这完全导致了另一种类型的错误（CastError）。当我尝试删除所有对clientProfile: ClientProfile[];的提及（或者在本教程中为Hero）时，问题可能开始了，因为我不再从client.ts（hero.ts）导入细节，因为我改用猫鼬模式，而且我不认为我应该将该架构导入到我的前端angular中。

这是clientProfile.service.ts的删除部分：

delete(_id: number): Promise<void>  {
    const url = `${this.clientProfilesUrl}/${_id}`;
    return this.http.delete(url, {headers: this.headers}).toPromise()
    .then(() => null).catch(this.handleError);
}

这是所请求的clientProfile.component.ts（我问题的最可能原因是我用clientProfile: ClientProfile;替换了clientProfile: any;的所有实例，却不知道自己在做什么）
注意注释掉的导入语句。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

//import { ClientProfile } from '../old/clientProfile';
import { ClientProfileService } from '../services/clientProfile.service';

@Component({
selector: 'app-clientprofile',
templateUrl: '../views/clientProfile.component.html',
styleUrls: [ '../styles/clientprofile.component.css' ]
})

export class ClientProfileComp implements OnInit {
selectedClientProfile: any;
clientProfiles: any = [];
clientProfile: any;

constructor(
    private clientProfileService: ClientProfileService,
    private router: Router
) { }

gotoDetail(): void {
    this.router.navigate(['/detail', this.selectedClientProfile._id]);
}

getClientProfiles(): void {
    this.clientProfileService.getClientProfiles().then(clientProfiles => {
        this.clientProfiles = clientProfiles;
    });
}

ngOnInit(): void {
    this.getClientProfiles();
}

onSelect(clientProfile: any): void {
    this.selectedClientProfile = clientProfile;
}

add(name: string, address: string): void {
    name = name.trim();
    address = address.trim();
    if (!name) { return; }
    this.clientProfileService.create(name, address).then(clientProfile => {
        this.clientProfiles.push(clientProfile);
            this.selectedClientProfile = null;
    this.getClientProfiles();
    });
}

delete(clientProfile: any): void {
    this.clientProfileService.delete(clientProfile._id).then(() => {
        this.clientProfiles = this.clientProfiles.filter(h => h !==
clientProfile);
        if (this.selectedClientProfile === clientProfile) { this.selectedClientProfile = null; }
    });
}
}

我整天都在仔细研究，并且在这里也阅读了很多类似的文章-但大多数解决方案似乎不适用于这种情况。如果有人能指出我正确的方向，我将不胜感激。如果需要更多代码来解释我要做什么，我将很乐意将其发布。

最佳答案

根据错误消息，似乎错误在这里：

this.router.navigate(['/detail', this.selectedClientProfile._id])

看来您只在onSelect中设置了它，并且在代码中有多个地方将this.selectedClientProfile设置为null。那将是最好的地方。

如果您想创建一个演示您问题的插件，我们可以进一步研究。

附带说明一下，您使用的是Promise而不是现在更常见的Observables。如果要转换为使用Observables，我在这里有一个完整的CRUD（创建，读取，更新和删除）操作示例：APM文件夹中的https://github.com/DeborahK/Angular2-ReactiveForms。

关于javascript - MEAN应用出现 Angular 2错误:无法读取未定义的属性_id，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46168261/