При извлечении данных с помощью Observable необходимо использовать dete.detectChanges Angular v6 + - PullRequest
Новая
       33

При извлечении данных с помощью Observable необходимо использовать dete.detectChanges Angular v6 +

0 голосов
/ 18 января 2020

У меня странная ошибка в моем angular проекте. Когда я получаю данные с помощью фиктивного API из локальных данных, все работает нормально, но когда я переключаюсь на Online API и выбираю данные с помощью метода подписки Observable, данные не обновляются в моем представлении шаблона angular. Он будет обновляться только при вызове метода detector.detectChanges().

Вкратце, Как-то при использовании онлайн-API двусторонняя привязка данных работает только тогда, когда я вызываю detectChanges.

Например, представьте сценарий ниже: 

 data = [some data here...]
 getData(): Observable<any> {
    return of(this.data);
}

когда я вызываю этот метод в моем файле .ts и извлекаю из него данные, шаблон angular будет обновляться автоматически. Но когда я переключаюсь на код ниже: 

getData(): Observable<any> {
    let url = `${this.API_URL}/fetchData/`;
    return this.http.get(url);
}

и извлекаю данные из моего angular .ts файла, как показано ниже: 

this.myService.getData().subscribe(result => {
    this.myData = result;
    // this.detector.detectChanges();
})

myData переменная не обновляется в Шаблон angular, если я не раскомментирую метод // this.detector.detectChanges().

И detectChanges импортируется из библиотеки ниже angular: 

private detector: ChangeDetectorRef,

Может кто-нибудь помочь мне, пожалуйста, чтобы преодолеть эту ошибку ? Это действительно раздражает, и мой код теперь имеет много detectChanges везде сразу после любого кода, который требует двустороннего связывания данных!

заранее спасибо

Обновление

мой . html файл 

 <table class="table table-bordered table-striped table-responsive"
                           style="display: inline-table;">
                        <thead>
                        <tr style="left: 0;">
                            <th><span>test</span></th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr style="left: 0;" *ngFor="let d of myData">
                               <td>{{d.test}}</td>
                            </tr>
                        </tbody>
                    </table>

1 Ответ

1 голос
/ 18 января 2020

В отличие от комментариев, я не люблю делать асин c в HTML, я делаю это так же, как вы кодировали выше. Мои вопросы - это то, что ваш ChangeDetectionStrategy настроен на компонент. Некоторые из них не будут автоматически уведомлять об изменениях и обновлять пользовательский интерфейс (который может объяснить вашу проблему).

Это потому, что в app.component.ts шаблона используется changeDetectionStrategy.onPush, поэтому, в основном, когда-либо в angular происходит контекст, я должен использовать такие команды, как detector.detectChanges(). Просто с помощью changeDetectionStrategy.Default все будет нормально, а двусторонняя привязка angular будет работать нормально.

...