将数据传递到角材料对话框进行编辑

Question

对于我的待办事项应用程序，我无法编辑现有待办事项。为此，我创建了一个材质对话框，并且还可以将现有数据传递到该对话框以用作占位符。我的问题是将编辑后的数据传回后端。

编辑对话框HTML：

<h1 mat-dialog-title>Edit Todo</h1>

<div mat-dialog-content>
    <mat-form-field>
        <input matInput type="text" placeholder="{{data.todoUpdate.taskName}}" [(ngModel)]="toDoData.taskName" required>
    </mat-form-field>


    <mat-form-field>
        <input matInput type="date" placeholder="{{data.todoUpdate.dueDate}}" [(ngModel)]="toDoData.dueDate" required>
    </mat-form-field>
</div>

<div>
    <mat-form-field class="full-width">
        <input matInput type="text" placeholder="{{data.todoUpdate.extraNote}}" [(ngModel)]="toDoData.extraNote">
    </mat-form-field>
</div>

<div mat-dialog-actions>
    <button mat-button>Cancel</button>
    <button mat-button (click)="updateToDo(data.toDoData.extra, data.toDoData)">Update</button>
</div>

编辑对话框TS：

import {Component, Inject, Input, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {TodoService} from '../shared/todo.service';

@Component({
    selector: 'app-edit-to-do-dialog',
    templateUrl: './edit-to-do-dialog.component.html',
    styleUrls: ['./edit-to-do-dialog.component.css']
})
export class EditToDoDialogComponent implements OnInit {

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

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




    ngOnInit() {
    }

    updateToDo(id, todo) {
        this.dialogRef.close();
        this.toDoData.taskName = this.data.taskName;
        this.toDoData.extraNote = this.data.extraNote;
        this.toDoData.dueDate = this.data.dueData;


        console.log(id);
        console.log(todo);

        this.todoService.updateToDo(id, todo).subscribe((res) => {

        }, (err) => {
            console.log(err);
        });
    }
}

应编辑的待办事项来自todo-list-component。希望这段代码有助于理解我的计划。 HTML：

import {Component, Inject, Input, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {TodoService} from '../shared/todo.service';

@Component({
    selector: 'app-edit-to-do-dialog',
    templateUrl: './edit-to-do-dialog.component.html',
    styleUrls: ['./edit-to-do-dialog.component.css']
})
export class EditToDoDialogComponent implements OnInit {

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

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




    ngOnInit() {
    }

    updateToDo(id, todo) {
        this.dialogRef.close();
        this.toDoData.taskName = this.data.taskName;
        this.toDoData.extraNote = this.data.extraNote;
        this.toDoData.dueDate = this.data.dueData;


        console.log(id);
        console.log(todo);

        this.todoService.updateToDo(id, todo).subscribe((res) => {

        }, (err) => {
            console.log(err);
        });
    }
}

TS：

import {Component, Input, OnInit} from '@angular/core';
import {TodoService} from '../shared/todo.service';
import {MatDialog} from '@angular/material';
import {EditToDoDialogComponent} from '../edit-to-do-dialog/edit-to-do-dialog.component';

@Component({
    selector: 'app-todo-list',
    templateUrl: './todo-list.component.html',
    styleUrls: ['./todo-list.component.css']
})
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(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 {
        const dialogRef = this.dialog.open(EditToDoDialogComponent, {
            data: {
                todoUpdate: todo,
            }
        });

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

最后是连接到我的后端的服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable, of} from 'rxjs';
import {map, catchError, tap} from 'rxjs/operators';

@Injectable({providedIn: 'root'})
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);
        };
    }
}

我可能误会了我应该如何进行更新作业...

感谢您的帮助！