Javascript 具有角度2错误的平均应用程序：无法读取未定义的属性_id

我第一次构建了一个应用程序来存储、更新、查看和删除客户端配置文件。我跟随《英雄之旅》创建了一个基本的应用程序，然后将网络上的mongodb和express部分拼凑起来

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

错误类型错误：无法读取未定义的属性“\u id” 在ClientProfileComp.webpackJsonp…/../../../../../../src/app/components/clientProfile.component.ts.ClientProfileComp.delete （clientProfile.component.ts:53）。。。（等等）

我已使用邮递员确认我的快递路线按预期运行。我可以在

/api/clients

上获取所有/创建客户端，以及从

/api/clients/：\u id

中获取、放置和删除（其中，\u id是每个条目的自动生成id）

我相信问题出在我的一个组件文件中，因为只有当我试图删除或查看特定的客户端详细信息时才会发生错误，这会导致另一种类型的错误（CastError）。当我试图删除所有提到的

clientProfile:clientProfile[]时，问题很可能就开始了

（在本教程中为Hero），因为我不再从

client.ts

（Hero.ts）导入详细信息，因为我使用的是mongoose模式，我认为我不应该将该模式导入到前端

以下是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);
}

---

我一整天都在仔细研究这个问题，也在这里读了很多类似的帖子——但大多数解决方案似乎并不适用于这个案例。如果有人能给我指出正确的方向，我将非常感激。如果需要更多的代码来解释我要做的事情，我很乐意发布。

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

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

您似乎只在选择中设置了它，并且您的代码中有几个地方设置了此。selectedClientProfile为空。那将是最好的去处

如果您想创建一个plunker来演示您的问题，我们可以进一步研究它

---

作为旁注，您使用的是承诺，而不是现在更常见的可观察对象。如果您想改用Observable，我这里有一个CRUD（创建、读取、更新和删除）操作的完整示例：在APM文件夹中。

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

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

您似乎只在选择中设置了它，并且您的代码中有几个地方设置了此。selectedClientProfile为空。那将是最好的去处

如果您想创建一个plunker来演示您的问题，我们可以进一步研究它

---

作为旁注，您使用的是承诺，而不是现在更常见的可观察对象。如果您想改用Observables，我这里有一个CRUD（创建、读取、更新和删除）操作的完整示例：在APM文件夹中。

发现了一个问题—html文件中的“我的删除”按钮位于一个div中，该div仅在选择客户端时出现，而不是在每个客户端旁边。这是我为确保用户不会在每个客户机上随意单击“删除”而采取的一项半成品措施的结果

前代码：

<h2>Client Profiles</h2>
<div class="add-client">
<label>Add new client</label>
<input placeholder="Client Name (required)" #clientProfileName />
<input placeholder="Client Address" #clientProfileAddress />
<button (click)="add(clientProfileName.value, clientProfileAddress.value); 
clientProfileName.value=''; clientProfileAddress.value=''">
    Add</button>
</div>
<ul class="clientProfiles">
<li *ngFor="let clientProfile of clientProfiles"
    [class.selected]="clientProfile === selectedClientProfile"
    (click)="onSelect(clientProfile)">
    <span class="badge">{{clientProfile.idnumber}}</span>
    <span>{{clientProfile.name}}</span>
</li>
</ul>
<div *ngIf="selectedClientProfile">
<h2>
    {{selectedClientProfile.name | uppercase}} selected
</h2>
<button (click)="gotoDetail()">View Details</button>
<button class="delete"
        (click)="delete(clientProfile); 
$event.stopPropagation()">Delete</button>
//delete button will only appear when a client is selected
</div>

客户端配置文件
添加新客户端
添加


{{clientProfile.idnumber}
{{clientProfile.name}


{{selectedClientProfile.name |大写}}已选中
查看详细信息
删除
//删除按钮仅在选择客户端时出现

立即编码：

<h2>Client Profiles</h2>
<div class="add-client">
<label>Add new client</label>
<input placeholder="Client Name (required)" #clientProfileName />
<input placeholder="Client Address" #clientProfileAddress />
<button (click)="add(clientProfileName.value, clientProfileAddress.value); 
clientProfileName.value=''; clientProfileAddress.value=''">
    Add</button>
</div>
<ul class="clientProfiles">
<li *ngFor="let clientProfile of clientProfiles"
    [class.selected]="clientProfile === selectedClientProfile"
    (click)="onSelect(clientProfile)">
    <span class="badge">{{clientProfile.idnumber}}</span>
    <span>{{clientProfile.name}}</span>
    <button class="delete"
        (click)="delete(clientProfile); 
$event.stopPropagation()">Delete</button>
//delete button appears next to each client
</li>
</ul>
<div *ngIf="selectedClientProfile">
<h2>
    {{selectedClientProfile.name | uppercase}} selected
</h2>
<button (click)="gotoDetail()">View Details</button>
</div>

客户端配置文件
添加新客户端
添加


{{clientProfile.idnumber}
{{clientProfile.name}
删除
//删除按钮出现在每个客户端旁边


{{selectedClientProfile.name |大写}}已选中
查看详细信息

发现了一个问题—html文件中的“我的删除”按钮位于一个div中，该按钮仅在选择客户端时出现，而不是出现在每个客户端旁边。这是我为确保用户不会在每个客户机上随意单击“删除”而采取的一项半成品措施的结果

前代码：

<h2>Client Profiles</h2>
<div class="add-client">
<label>Add new client</label>
<input placeholder="Client Name (required)" #clientProfileName />
<input placeholder="Client Address" #clientProfileAddress />
<button (click)="add(clientProfileName.value, clientProfileAddress.value); 
clientProfileName.value=''; clientProfileAddress.value=''">
    Add</button>
</div>
<ul class="clientProfiles">
<li *ngFor="let clientProfile of clientProfiles"
    [class.selected]="clientProfile === selectedClientProfile"
    (click)="onSelect(clientProfile)">
    <span class="badge">{{clientProfile.idnumber}}</span>
    <span>{{clientProfile.name}}</span>
</li>
</ul>
<div *ngIf="selectedClientProfile">
<h2>
    {{selectedClientProfile.name | uppercase}} selected
</h2>
<button (click)="gotoDetail()">View Details</button>
<button class="delete"
        (click)="delete(clientProfile); 
$event.stopPropagation()">Delete</button>
//delete button will only appear when a client is selected
</div>

客户端配置文件
添加新客户端
添加


{{clientProfile.idnumber}
{{clientProfile.name}


{{selectedClientProfile.name |大写}}已选中
查看详细信息
删除
//删除按钮仅在选择客户端时出现

立即编码：

<h2>Client Profiles</h2>
<div class="add-client">
<label>Add new client</label>
<input placeholder="Client Name (required)" #clientProfileName />
<input placeholder="Client Address" #clientProfileAddress />
<button (click)="add(clientProfileName.value, clientProfileAddress.value); 
clientProfileName.value=''; clientProfileAddress.value=''">
    Add</button>
</div>
<ul class="clientProfiles">
<li *ngFor="let clientProfile of clientProfiles"
    [class.selected]="clientProfile === selectedClientProfile"
    (click)="onSelect(clientProfile)">
    <span class="badge">{{clientProfile.idnumber}}</span>
    <span>{{clientProfile.name}}</span>
    <button class="delete"
        (click)="delete(clientProfile); 
$event.stopPropagation()">Delete</button>
//delete button appears next to each client
</li>
</ul>
<div *ngIf="selectedClientProfile">
<h2>
    {{selectedClientProfile.name | uppercase}} selected
</h2>
<button (click)="gotoDetail()">View Details</button>
</div>

客户端配置文件
添加新客户端
添加


{{clientProfile.idnumber}
{{clientProfile.name}
删除
//删除按钮出现在每个客户端旁边


{{selectedClientProfile.name |大写}}已选中
查看详细信息

Error它自己说它没有在undefind字段上找到

id

，这意味着当你在做

clientProfile时，它在你的
clientProfile.component.ts
中。当时
clientProfile
是
undefined
发布你的
clientProfile.component.ts的完整代码。component.ts
在代码之上（clientProfile.component.ts:53）？@TarangRathod correct.@ranakrunal9我将编辑帖子以包含该文件的完整代码错误，它自己说在未查找字段上找不到
\u id
，这意味着在您的