Angular 6 - Связующий элемент не обновляется после изменения данных

Question

В моем HTML я повторяю элемент:

<ul *ngFor="let item in items">
    <li>{{ item.id }}</li>
</ul>

Это работает нормально.Но теперь это значение изменяется в вызове API, например:

doApiCall(){
    let value = this.items.find( x => x.id = '123');
    this.service.doIt().subscribe(
        (res: HttpResponse<myModel>) => {
            // response === { id = 456' }
            return value = res.body;
        }
    )
}

, теперь элемент в массиве изменился, но представление не изменилось.Но забавно то, что если я сразу изменю let value сразу после его установки, например:

let value = this.items.find( x => x.id = '123');
value.id = '345'

, тогда произойдет обновление.Поэтому я не знаю, делаю ли я что-то неправильно в вызове API.

Answer 1

Кажется, вам нужно обновить работу JavaScript.Вы возвращаете value = res.body значение.Но что это?Это даже не сработает.

Кажется, что items - это массив объектов, которые являются ссылочными типами.Когда вы пытаетесь сделать value = res.body, вы ничего не меняете внутри массива items.Вы просто переназначаете ссылку, которая хранится в переменной value, но ваш элемент, найденный с помощью функции Array.find, не тронут.Может быть, вам стоит попробовать что-то вроде

doApiCall() {
    let value = this.items.find(x => x.id = '123');
    this.service.doIt().subscribe(
        (res: HttpResponse < any > ) => {
            value.id = res.body.id;
            value.someproperty = res.body.property;
        }
    )
}

Но я не знаю вашу HttpResponse.body модель.Вот почему вы должны ответить Promise<T> из сервиса вместо HttpResponse<any>.Вы используете TypeScript, так что сделайте его полезным!