Angular Put请求更改布尔值

时间:2018-02-21 05:21:29

标签: angular angular2-services

在我的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作为正确的类型

0 个答案:

没有答案