typescript - 显示在列表中时 angular2 中的 Firebase 值

Question

这是加载、添加并将 ToDo 标记为已完成：

    todos: FirebaseListObservable<any>;

    ngOnInit(){
        this.todos = this._af.database.list('todos')
    }

    addTodo(newTodo: string){
        this.todos.push({
            todo: newTodo
        } )
    }

    finishedTodo(key: string, finished: boolean, isFinished: boolean){

        var snapshotFinished = this._af.database.object('todos/'+ key,{ preserveSnapshot: true})

        snapshotFinished.subscribe(snapshot => {          
            isFinished = snapshot.val().finished;  
        });

        if (isFinished == false || isFinished == null){
            this.todos.update(key,{finished: true});
            isFinished = true;
            console.log(isFinished);
        }    
        else{
            this.todos.update(key,{finished: false});
            isFinished = false;
            console.log(isFinished);
        }
    }

这是html：

<div *ngFor="let todo of todos | async">

    <span> {{todo.todo}} </span>

    <button (click)="finishedTodo(todo.$key)">Finished</button>
</div>  

单击 Finished 按钮可finished在 Firebase 中将值切换为 true 或 false。但我不知道如何在 Angular2 列表中使用它。

所以我的问题是：在显示待办事项列表时，如何从 Firebase 内部检查finished列表中每个项目的值？

Answer 1

您应该能够在模板 HTML 中添加一个复选框并引用todo.finished您的finished布尔值。

<div *ngFor="let todo of todos | async">
  <input type="checkbox" [(ngModel)]="{{ todo.finished }}">
  <span>{{ todo.todo }}</span>
  <button (click)="finishedTodo(todo.$key)">Finished</button>
</div>