Question

我正在尝试解决一个问题，即更新的列表没有显示在前端。显示的列表位于待办事项列表组件中。新的待办事项按钮位于标题组件中。

添加新组件时，我将调用getToDos方法来更新列表。从控制台，列表增加了一个，但是当我从todo-list组件调用相同的方法时，大小没有改变。从此屏幕截图中查看：https://snag.gy/lNVbX3.jpg

这是由于我创建了一个单独的组件实例而发生的，它不会影响假定的列表吗？

如果是这样，我应该怎么做正确的方法？

ToDoListComponent：

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,
            }
        });
        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed');
        });
    }

    printList() {
        console.log('print list button', this.todoList);
    }

    callGetToDo() {
        this.getToDos();
    }
}

ToDoList html：

<button (click)="printList()">Print List</button>
<button (click)="callGetToDo()">Call Method</button>

<mat-card class="example-card" *ngFor="let todo of todoList">
    <mat-card-header>
        <div mat-card-avatar>
            <mat-icon [ngClass]="todo.taskCompleted ? 'green' : 'red' ">thumb_up</mat-icon>

        </div>
        <mat-card-title>{{todo.taskName}}</mat-card-title>
        <mat-card-subtitle>
            <mat-icon style="font-size: 15px">calendar_today</mat-icon>
            {{todo.dueDate | date: 'dd.MM.yyyy'}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            {{todo.extraNote}}
        </p>
    </mat-card-content>
    <mat-card-actions align="center">
        <button mat-button (click)="completed(todo.id, todo)">
            <mat-icon *ngIf="!todo.taskCompleted">done</mat-icon>
            <mat-icon *ngIf="todo.taskCompleted">close</mat-icon>
        </button>
        <button mat-button (click)="openDialog(todo)">
            <mat-icon>edit</mat-icon>
        </button>
        <button mat-button (click)="delete(todo.id)">
            <mat-icon>delete</mat-icon>
        </button>
    </mat-card-actions>
</mat-card>

HeaderComponent：

export class HeaderComponent implements OnInit {

    ngOnInit() {
    }

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


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

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

HeaderComponent HTML：

<mat-toolbar class="mat-toolbar">
  <span>My ToDo App</span>
  <span class="fill-space"></span>
  <button mat-raised-button (click)="openDialog()">New ToDo</button>
</mat-toolbar>

如果我的问题不清楚，我感到非常抱歉。

感谢您的帮助！

编辑：我是否应该将列表显示在单独的服务中，例如本示例中的文档？ https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 1

您似乎正在创建两个TodoService实例，因此这两个组件中的数据是不同的。在这种情况下，您应该通过这些组件共享一个实例。

对于Angular 6+，您可以在服务中使用它：

@Injectable({
  providedIn: 'root',
})

对于Angular 2-5，您可以在模块中完成：

@NgModule({
  providers: [TodoService],
})

有关服务提供商的更多信息-Angular IO

如果这样做没有帮助，请与您分享模块和服务代码。

有人可以解释列表的这种行为吗？

1 个答案: