添加新项目后，列表不会更新列表

Question

我有一个待办事项列表，每个项目都有可能被删除或修改。当我执行这两个操作中的任何一个时，该项目会立即在列表中更新。

当我将新项目添加到列表时，列表不会重新加载，我必须刷新页面才能看到新项目。我已经阅读了有关该主题的内容，并实现了trackElement方法，但是它似乎不起作用。

在创建新项目的对话框中是否有单独的组件是一个问题吗？

todo-list-component.ts：

export class TodoListComponent implements OnInit {

    todoList: Array<any>;

    constructor(private todoService: TodoService, private dialog: MatDialog) {
    }



    @Input() toDoData = {taskName: '', taskCompleted: false, date: Date};


    ngOnInit() {
        this.getToDos();
    }

    getToDos() {
        this.todoList = [];
        this.todoService.getToDos().subscribe((data: []) => {
            console.log('Todo List get Todos ', data);
            this.todoList = data;
        });
    }

    delete(id) {
        this.todoService.deleteToDo(id)
            .subscribe(res => {
                    this.getToDos();
                }, (err) => {
                    console.log(err);
                }
            );
    }

    completed(id, todo) {
        todo.taskCompleted = !todo.taskCompleted;
        this.todoService.updateToDo(id, todo)
            .subscribe(res => {
                this.getToDos();
            }, (err) => {
                console.log(err);
            });
    }

    openDialog(todo): void {
        console.log('TodoList Dialog Open: ', todo);
        const dialogRef = this.dialog.open(EditToDoDialogComponent, {
            data: {
                todoUpdate: todo,
            }
        });

        console.log('Edit Dialog:' + todo.toString());

        dialogRef.afterClosed().subscribe(result => {
            this.getToDos();
            console.log('The dialog was closed');
        });
    }

    trackElement(index: number, element: any) {
        return element ? element.id : null;
    }
}

带有openDialog（）的标题组件：

export class HeaderComponent implements OnInit {

    ngOnInit() {
    }

    constructor(private todoService: TodoService, private dialog: MatDialog) {
    }


    openDialog(): void {
        const dialogRef = this.dialog.open(NewToDoDialogComponent, {});

        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed');
        });
    }
}

最后是新的待办事项对话框：

export class NewToDoDialogComponent implements OnInit {

    @Input() toDoData = {taskName: '', extraNote: '', taskCompleted: false, dueDate: Date};

    constructor(
        public dialogRef: MatDialogRef<NewToDoDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any, private todoService: TodoService) {
    }


    ngOnInit() {
    }

    saveToDo() {
        this.dialogRef.close();
        this.todoService.addToDo(this.toDoData)
            .subscribe((result) => {
                this.todoService.getToDos();
            });
    }
}

Todo服务：

export class TodoService {
    public API = 'http://localhost:8080/';

    httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };


    constructor(private http: HttpClient) {
    }

    private extractData(res: Response) {
        const body = res;
        return body || {};
    }

    getToDos(): Observable<any> {
        return this.http.get(this.API + 'todos').pipe(
            map(this.extractData));
    }

    getToDo(id): Observable<any> {
        return this.http.get(this.API + 'todos/' + id).pipe(
            map(this.extractData));
    }

    addToDo(todo): Observable<any> {
        return this.http.post<any>(this.API + 'todos', JSON.stringify(todo), this.httpOptions).pipe(
            tap((todo) => console.log(`added todo w/ id=${todo.id}`)),
            catchError(this.handleError<any>('addTodo'))
        );
    }

    updateToDo(id, todo): Observable<any> {
        return this.http.put(this.API + 'todos/' + id, JSON.stringify(todo), this.httpOptions).pipe(
            tap(_ => console.log(`updated todo id=${id}`)),
            catchError(this.handleError<any>('updateTodo'))
        );
    }

    deleteToDo(id): Observable<any> {
        return this.http.delete<any>(this.API + 'todos/' + id, this.httpOptions).pipe(
            tap(_ => console.log(`deleted todo id=${id}`)),
            catchError(this.handleError<any>('deleteToDo'))
        );
    }

    private handleError<T>(operation = 'operation', result?: T) {
        return (error: any): Observable<T> => {
            // TODO: send the error to remote logging infrastructure
            console.error(error); // log to console instead
            // TODO: better job of transforming error for user consumption
            console.log(`${operation} failed: ${error.message}`);
            // Let the app keep running by returning an empty result.
            return of(result as T);
        };
    }
}

如果有帮助，该应用程序的外观如下： https://snag.gy/689q7z.jpg

感谢您的帮助或建议！