Угловая переменная / объект не определены после передачи в сервисную функцию

Question

У меня есть следующий код.

Detail.component.ts

ngOnInit() {
    this.route.paramMap.subscribe((params) => {
                const itemId = params.get('itemId') //works
                console.log(itemId)
                if (itemId === 'new') {
                    this.mode = 'new'
                    this.item = new Item()
                } else {this.shoppingListService.getSingleItem(itemId).then((recItem) => {
                        this.item = recItem
                        console.log(JSON.stringify(this.item)); // works
                    })
                }
            })
}

Следующая функция запускается внутри Detail.component.html

Перед вызовом сервисного вызова (updateItem или editItem) объект все еще определен!

     async onSaveClicked() {

    console.log("inside onsaveClicked" + JSON.stringify(this.item)); //works

            try {
                if (this.mode === 'new') {
                    this.shoppingListService.createItem(this.item)
                    this.router.navigate(['/list'])

                } else if (this.mode === 'edit') {
                    this.shoppingListService.updateItem(this.item)
                    console.log("edit: " + JSON.stringify(this.item));



                    this.mode = 'view'
                }
            } catch (error) {
                console.log(error)
            }
}

Следующая сервисная функция называется

Внутри этой функции переданный объект (updateItem) не определен.

async updateItem(updateItem: Item) {

    console.log("inside update Item " + updateItem.id) //undefined
    const result = await this.httpClient.put<any>(`${this.apiEndpoint}/${updateItem.id}`, updateItem).toPromise()
    return result;      
}

Это должно сделать что-то.с асинхронным поведением th httpclient но где именно проблема?