Почему метод Angular PUT работает так?

Question

У меня есть список предметов и две функции

Первая, которая переключает флажок, после нажатия на нее

toggleCheckbox(listItem: ListItem) {
    this.listDashboardService
        .changeInput(listItem)
        .subscribe((data: ListItem) => {
            this.listItems = this.listItems.map((item: ListItem) => {
                if(item.id === listItem.id) {
                    item = Object.assign({}, item, listItem);
                } 

                return item;
            });
        });
}

И вторая, которая берет все элементы из списка, и устанавливает его флажок в true, однако, он не работает . Он устанавливает все флажки в значение true, но запрос PUT не вносит никаких изменений

checkAllItems() {
    this.listItems.forEach(item => {
        this.listDashboardService
            .changeInput(item)
            .subscribe((data: ListItem) => {
                this.listItems = this.listItems.map((listItem: ListItem) => {
                    if(item.id === listItem.id) {
                        listItem.isChecked = true;
                    }

                    return listItem
                })
            })
    })
}

Я пробовал много раз и, наконец, пришел к правильному решению (этот работает нормально)

checkAllItems() {
    this.listItems.forEach(item => {
        if (!item.isChecked) {
            item.isChecked = true;

            this.listDashboardService
                .changeInput(item)
                .subscribe((data: ListItem) => {})
        }
    })
}

Итак, мой вопрос: почему checkAllItems() не работает так же, как toggleCheckbox() работает? Я имею в виду, почему, когда я пытаюсь изменить свойство isChecked внутри subscribe(), оно не вносит никаких изменений в базу данных?

Код компонента

import { ListItem } from '../../models/list-item.interface';
import { ListDashboardService } from '../../list-dashboard.service';

@Component({
    selector: 'list-main',
    styleUrls: ['list-main.component.scss'],
    template: `
        <div class="title">
            <h1>Database To-do Angular</h1>
            <h3>by Maksym Novikov</h3>
        </div>

        <div class="form">
            <list-form
                [blankListItem]="listItem"
                (addNewListItem)="addItem($event)">
            </list-form>
        </div>

        <div class="buttons-dashboard">
            <button (click)="clearList()">Clear list</button>
            <button (click)="clearCompleted()">Clear completed</button>

            <button (click)="checkAllItems()">Check all</button>
        </div>

        <div>
            <list-item
                *ngFor="let item of listItems"
                [listItem]="item"
                (delete)="deleteItem($event)"
                (toggleCheckbox)="toggleCheckbox($event)">
            </list-item>
        </div>        
    `
})

export class ListMainComponent implements OnInit {
    listItems: ListItem[];
    listItem: ListItem;

    constructor(private listDashboardService: ListDashboardService) {}

    ngOnInit() {
        this.listDashboardService
            .getAllListItems()
            .subscribe((data: ListItem[]) => this.listItems = data);

        this.listItem = {
            id: undefined,
            title: '',
            isChecked: false
        }
    }

    addItem(listItem: ListItem) {
        this.listDashboardService
            .addListItem(listItem)
            .subscribe((data: ListItem) => {
                this.listItems.push(data);
            });
    }

    deleteItem(listItem: ListItem) {
        this.listDashboardService
            .deleteListItem(listItem)
            .subscribe((data: ListItem) => {
                this.listItems = this.listItems.filter(
                    (el: ListItem) => el.id !== listItem.id
                );
            });
    }

    toggleCheckbox(listItem: ListItem) {
        this.listDashboardService
            .changeInput(listItem)
            .subscribe((data: ListItem) => {
                this.listItems = this.listItems.map((item: ListItem) => {
                    if(item.id === listItem.id) {
                        item = Object.assign({}, item, listItem);
                    } 

                    return item;
                });
            });
    }



    // Buttons dashboard

    clearList() {
        this.listItems.forEach(item => {
            this.listDashboardService
                .deleteListItem(item)
                .subscribe((data: ListItem) => {
                    this.listItems = this.listItems.filter(
                        (listItem: ListItem) => listItem.id !== item.id 
                    )
                })
        });
    }

    clearCompleted() {
        this.listItems.forEach(item => {
            if (item.isChecked) {
                this.listDashboardService
                    .deleteListItem(item)
                    .subscribe((data: ListItem) => {
                        this.listItems = this.listItems.filter(
                            (listItem: ListItem) => listItem.id !== item.id
                        )
                    })
            }
        })
    }

    checkAllItems() {
        this.listItems.forEach(item => {
            if (!item.isChecked) {
                item.isChecked = true;

                this.listDashboardService
                    .changeInput(item)
                    .subscribe((data: ListItem) => {})
            }
        })
    }    

    // checkAllItems() {
    //     this.listItems.forEach(item => {
    //         this.listDashboardService
    //             .changeInput(item)
    //             .subscribe((data: ListItem) => {
    //                 this.listItems = this.listItems.map((listItem: ListItem) => {
    //                     if(item.id === listItem.id) {
    //                         listItem.isChecked = true;
    //                     }

    //                     return listItem
    //                 })
    //             })
    //     })
    // }

}

Код услуги

import { Injectable } from "@angular/core";

import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';

import { ListItem } from "./models/list-item.interface";

const LIST_API: string = '/api/listItems';

@Injectable()
export class ListDashboardService {
    constructor(private http: Http) {}

    getAllListItems(): Observable<ListItem[]> {
        return this.http
            .get(LIST_API)
            .map((response: Response) => response.json())
    }

    addListItem(listItem: ListItem): Observable<ListItem> {
        return this.http
            .post(LIST_API, listItem)
            .map((response: Response) => response.json());
    }

    deleteListItem(listItem: ListItem): Observable<ListItem> {
        return this.http
            .delete(`${LIST_API}/${listItem.id}`)
            .map((response: Response) => response.json());
    }

    changeInput(listItem: ListItem): Observable<ListItem> {
        return this.http
            .put(`${LIST_API}/${listItem.id}`, listItem)
            .map((response: Response) => response.json());
    }
}