Компонент обновления Angular при изменении состояния

avatar
Christopher Kas
8 августа 2021 в 21:36
231
2
0

Я работаю над своим первым приложением angular и испытываю некоторые проблемы с обновлением/повторным рендерингом моего компонента.

В моем компоненте есть функция обновления, которая извлекает ресурс из моей серверной части и сохраняет результат в переменной с именем taskList. Я хотел бы, чтобы компонент обновлялся/перерисовывался каждый раз, когда вызывается эта функция.

update = async () => {
    const url = 'http://localhost:3000/tasks/' + this.date.valueOf();
    const data = await fetch(url);
    const result = await data.json();
    this.taskList = result.tasks
};

Я отображаю значения списка следующим образом:

<div 
    <div 
        *ngFor="let tasks of taskList" 
        class={{tasks.color}}  
        {{tasks.text}}
    </div>
</div>

У меня есть еще один случай, когда я добавляю элементы в список с последующим вызовом функции обновления. Он успешно обновляет переменную taskList, но не выполняет повторную визуализацию компонента.

Я пробовал различные реализации ChangeDetectorRef, которые я нашел в Интернете, но безуспешно.

Источник
Ashot Aleqsanyan
8 августа 2021 в 22:21
0

Перейдите по этой ссылке, чтобы совершать HTTP-вызовы под углом. angular.io/api/common/http/HttpClient . О вашей проблеме: будет здорово, если вы поделитесь примером минимального воспроизведения.

Christopher Kas
9 августа 2021 в 01:43
0

Я добавил дополнительные пояснения относительно того, как используются данные и в чем проблема. @АшотАлексанян

Dan Oswalt
9 августа 2021 в 02:17
0

этот html-шаблон будет иметь синтаксические ошибки, если это действительно так в коде

Ответы (2)

avatar
Dan Oswalt
9 августа 2021 в 02:13
0

Вы можете попробовать канал async, который можно использовать для обновления как наблюдаемых объектов, так и того, что вы здесь делаете, используя промисы. *ngFor="let tasks of taskList | async"

При этом ваша жизнь, вероятно, станет проще, если вы избежите промисов и перейдете к http-клиенту и наблюдаемым объектам в Angular.

avatar
vsnikhilvs
9 августа 2021 в 02:07
0

Возможно, вы захотите вызвать API в стиле Angular, я имею в виду, что вы можете отказаться от async/await и просто сделать обычный вызов.