在我的Todolist应用程序中,我想通过单击Todo更新布尔值为True或False。
在todolist.component.html中:
<div class="todo-list">
<label class="todo-input">
<input (keyup.enter)="add(todoName.value); todoName.value=''" #todoName/>
</label>
<button (click)="add(todoName.value); todoName.value=''">add</button>
<ul *ngFor="let todo of todos">
<li class="finished-{{todo.completed}}">{{todo.name}}</li>
</ul>
</div>
然后这是我在todo.service.ts中的代码:
@Injectable()
export class TodoService {
private todosURL = 'http://localhost:3000/api/todos/';
constructor(private http: HttpClient) {
}
getTodos(): Observable<Todo[]> {
return this.http.get<Todo[]>(this.todosURL)
}
addTodo(todo: Todo): Observable<Todo> {
return this.http.post<Todo>(this.todosURL, todo, httpOptions).pipe(
tap((todo: Todo) => this.log(`We ve added the to do with id=${todo.id}`)),
catchError(this.handleError<Todo>('addTodo'))
);
}
}
最后,我的todolist.component.ts中的代码
ngOnInit() {
this.getTodos();
}
getTodos(): void {
this.todoService.getTodos()
.subscribe(todos => this.todos = todos);
}
add(name: string): void {
name = name.trim();
if (!name) {
return;
}
this.todoService.addTodo({name} as Todo)
.subscribe(todo => {
this.todos.push(todo);
})
}
大部分是Heroes Angular Tutorial Page的复制和粘贴;但是很想看看我能用布尔调用做什么
另外,我确实将我的模型中的Completed Boolean设置为String,我读到某个角度不接受boolean作为正确的类型