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>

单击“完成”按钮可用于在Firebase中将finished值切换为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>

在列表中显示时，角度2中的Firebase值

1 个答案: