MEAN CRUD 앱에서 삭제 확인 후 미확인 속성 '_id'을 읽을 수 없습니까?

Question

enter link description here

다음은 중간 CRUD 작업을 배우기 위해 사용한 튜토리얼의 링크입니다.

요청에 따라 아래 관련 코드를 게시합니다. 또한 Chrome 콘솔에 TypeError : todo-list.component.ts : 56에서 정의되지 않은 의 '_id'속성을 읽을 수 없습니다.

todolist.component.ts 여기

import { Component, OnInit } from '@angular/core'; 
import { TodoService } from '../todo.service'; 
@Component({ 
    selector: 'app-todo-list', 
    templateUrl: './todo-list.component.html', 
    styleUrls: ['./todo-list.component.css'] 
}) 
export class TodoListComponent implements OnInit { 
    todos:any[] = []; 
    todo:any = {}; 
    todoToEdit:any = {}; 
    todoToDelete:any = {}; 
    apiMessage:string; 
constructor(private todoService:TodoService) { } 
ngOnInit(): void { 
    this.todoService.showAddTodoBox = true; 
    this.todoService.getTodos() 
        .then(td => this.todos = td.todos) 
    } 
AddTodo(todo:any):void{ 
    if(!todo){ return; } 
    this.todoService.createTodo(todo) 
        .then(td => { 
         console.log(td); 
         this.todos.push(td.todo); 
        }) 
    } 
showEditTodo(todo:any):void{ 
    this.todoToEdit = todo; 
    this.apiMessage = ""; 
    } 
EditTodo(todo:any):void{ 
    if(!todo){ return; } 
    todo.id = this.todoToEdit._id; 
    this.todoService.updateTodo(todo) 
        .then(td => { 
         const updatedTodos = this.todos.map(t => { 
         if(td.todo._id !== t._id){ 
          return t; 
         } 
         return { ...t, ...td.todo }; 
         }) 
         this.apiMessage = td.message; 
         this.todos = updatedTodos; 
        }) 
    } 
showDeleteTodo(todo:any):void{ 
    this.todoToDelete = todo; 
    this.apiMessage = ""; 
} 
DeleteTodo(todo:any):void{ 
    if(!todo){ return; } 
    this.todoService.deleteTodo(todo) 
        .then(td => { 
        const filteredTodos = this.todos.filter(t => t._id !== td.todo._id); 
        this.apiMessage = td.message; 
        this.todos = filteredTodos; 
        }) 
} 
} 

이고 할 일 - list.component.html 주석에 명시된 바와 같이

<div align="center" class="AddTodoBox" [hidden]="todoService.showAddTodoBox"> 
    <h4>Add New Todo</h4> 
    <form (ngSubmit)="AddTodo(todo);todoForm.reset()" #todoForm="ngForm"> 
    <div class="form-group"> 
    <label for="todoText">Todo:</label> 
    <input type="text" [(ngModel)]="todo.todoText" #todotext="ngModel" class="form-control" name="todoText" id="todoText" required /> 
    <div [hidden]="todotext.valid || todotext.pristine" 
     class="alert alert-danger"> 
     Todo is required 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="todoDesc">Description:</label> 
    <input type="text" class="form-control" [(ngModel)]="todo.todoDesc" #tododesc="ngModel" name="todoDesc" id="todoDesc" required /> 
    <div [hidden]="tododesc.valid || tododesc.pristine" 
     class="alert alert-danger"> 
     Description is required 
    </div> 
    </div> 
<button type="submit" [disabled]="!todoForm.form.valid" class="btn btn-success btn-block">Submit</button> 
</form> 
</div> 
<div *ngIf="todos && todos.length > 0" class="TodoListBox"> 
    <h2 align="center">Your Todo's List</h2> 
    <table id="mytable" class="table table-bordred table-striped"> 
<thead> 
        <th>Todo</th> 
         <th>View</th> 
         <th>Edit</th> 
         <th>Delete</th> 
        </thead> 
    <tbody> 
<tr *ngFor="let todo of todos"> 
    <td>{{todo.todoText}}</td> 
    <td><a [routerLink]="['/todo', todo._id]" title="Click to Open {{todo.todoText}}">View</a></td> 
    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" (click) = "showEditTodo(todo)" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td> 
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" (click) = "showDeleteTodo(todo)" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td> 
    </tr> 
<tr> 
    </tbody> 
    </table> 
    <!-- Edit Modal --> 
    <div class="modal fade" id="edit" role="dialog"> 
    <div class="modal-dialog modal-md"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Edit Todo</h4> 
     </div> 
     <div class="modal-body"> 
      <div align="center" class="EditTodoBox"> 
      <form (ngSubmit)="EditTodo(todoToEdit)" #editTodoForm="ngForm"> 
      <div class="form-group"> 
       <label for="todoText">Todo:</label> 
       <input type="text" [(ngModel)]="todoToEdit.todoText" #todoedittext="ngModel" class="form-control" name="todoText" id="todoText" required /> 
       <div [hidden]="todoedittext.valid || todoedittext.pristine" 
        class="alert alert-danger"> 
       Todo is required 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="todoDesc">Description:</label> 
       <textarea class="form-control" [(ngModel)]="todoToEdit.todoDesc" #todoeditdesc="ngModel" name="todoDesc" id="todoDesc" required></textarea> 
       <div [hidden]="todoeditdesc.valid || todoeditdesc.pristine" 
        class="alert alert-danger"> 
       Description is required 
       </div> 
      </div> 
<button type="submit" [disabled]="!editTodoForm.form.valid || !editTodoForm.form.dirty" class="btn btn-success btn-block">Submit</button> 
      </form> 
      <div style="margin:10px;" *ngIf="apiMessage" align="center" class="alert alert-success" role="alert"> 
      <strong>{{apiMessage}}</strong> 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
<!-- Delete Modal --> 
    <div class="modal fade" id="delete" role="dialog"> 
    <div class="modal-dialog modal-md"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Delete Todo</h4> 
     </div> 
     <div class="modal-body"> 
      <div align="center" class="DeleteTodoBox"> 
      <div *ngIf="!apiMessage" align="center" class="alert alert-danger" role="alert"> 
       <p>Are you sure want to delete this todo?</p> 
      <strong>{{todoToDelete.todoText}}</strong> 
      </div> 
      <div style="margin:10px;" *ngIf="apiMessage" align="center" class="alert alert-success" role="alert"> 
      <strong>{{todoToDelete.todoText}}</strong> {{apiMessage}} 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-danger" *ngIf="!apiMessage" (click)="DeleteTodo(todoToDelete)">Confirm</button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<div *ngIf="todos.length <= 0" class="NoTodosBox"> 
<div align="center" class="alert alert-info" role="alert"> 
<strong>No Todos Available in Database</strong> 
</div> 
</div> 

Answer 1

; 삭제할 작업 항목을 사용하여 문제를 해결할 수 있습니다. closure을 통해 사용할 수 있습니다.

todoService.deleteTodo을 해결하고 삭제 된 할 일 목록의 ID를 사용할 수 있는지 확인할 수 있습니다. 당신은 당신의 코드 오류가 어디 있는지를 알 수 있습니다,

이

const filteredTodos = this.todos.filter(t => t._id !== todo._id)