Angular 5 View не обновляется с помощью модели
Я использую Angular версии 5.
Я загружаю данные из веб-службы Google Places с помощью Angular-Maps. Я запускаю службу для получения данных и загрузки их в переменную, скажем, «данные». В моем компоненте я подписываюсь на «данные», поэтому всякий раз, когда значение «данных» изменяется, мое представление должно обновляться.
Но что удивительно, когда значение «данных» изменяется, и я могу записать это изменение с помощью console.info, представление не обновляется? Он обновляется только тогда, когда я взаимодействую с каким-либо другим элементом в представлении.
Это снимок моей службы
private rs = new BehaviorSubject<Object>(undefined);
rd = this.rs.asObservable();
constructor(private mapi: MapsAPILoader)
{
this.mapsAPILoader.load().then(() =>
{
this.ps = new google.maps.places.PlacesService(document.createElement('div'));
});
}
fPi(pid: string)
{
this.ps.getDetails(
{ placeId: pid }, (pr, status) =>
{
if (status === 'OK')
{
this.extract(pr);
}
});
}
extract(pr)
{
let details = [];
if (pr.formatted_address)
{
details.push({"field": "Address", "value": placeResult.formatted_address});
}
if (pr.international_phone_number)
{
details.push({"field": "Phone Number", "value": placeResult.international_phone_number});
}
this.update(placeDetails);
}
update(rd: Object)
{
console.info(rd);
this.rs.next(rd);
}
Это моя составная часть, где написано
this.service.rd.subscribe(rd =>
{
if (rd)
this.data = Object.values(rd);
});
А в HTML я просто делаю
<div *ngIf = "data">
{{data}}
</div>
Итак, что здесь не так и что можно сделать, чтобы исправить это?
надеюсь, вы правильно выполнили привязку ...
Код @HuseinRoncevic добавлен, пожалуйста, помогите
Внедрить ChangeDetectorRef в компонент и вызвать this.cdr.detectChanges () в обратном вызове подписки после назначения новых данных
@AlexanderPoshtaruk - это хорошая практика - использовать ChangeDetector, даже если у нас есть привязка данных?
Вы используете обнаружение изменений OnPush?
Как предложил @TomaszKula, попробуйте использовать стратегию обнаружения изменений OnPush. Вы пытаетесь отслеживать изменения ссылочного типа, который может не сообщать об изменениях. Также попробуйте вызвать в this.data = rd, не проходя через Object.value(rd), просто чтобы посмотреть, работает ли он.
Если некоторые библиотеки используют асинхронные вызовы - они могут быть не исправлены зоной ng, поэтому не могут вызывать автоматическое обнаружение изменений. В этом случае вы должны вызвать его самостоятельно
@SK Я не думаю, что это хорошая практика. Обычно есть способ избежать прямого использования ChangeDetection ref. Это последнее, к чему я бы потянулся.
Ответы 1
Это пример того, как я справляюсь с подобной ситуацией в одном из моих компонентов. Главное здесь то, что я создаю Observable, а затем назначаю ответ поведения объекта Observable. Затем я использую асинхронный канал в шаблоне, который гарантирует, что все будет правильно отписано. Вот пример почти такой же петли, которую вы делаете выше:
import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { PitchingInitiativesService } from '../../services/pitching-initiatives.service';
import { EventService } from 'app/services/events/events.service';
@Component({
selector: 'app-pitching-table',
templateUrl: './pitching-table.component.html'
})
export class PitchingTableComponent implements OnInit {
@Input() searchText = '';
searchKey = 'name';
table: any = [];
constructor(
private pitching: PitchingInitiativesService,
private events: EventService
) {}
ngOnInit() {
this.pitching.getPitchingSubject();
this.pitching.pitchingResponse$.subscribe(response => this.table = response);
}
editPi(id = null) {
this.events.pitchingId(id);
}
editMilestones(id) {
this.events.milestonesId(id);
}
archivePi(id) {
this.pitching.postArchivePitch(id).subscribe(response => {
this.pitching.getPitchingSubject();
});
}
}
а затем в моем шаблоне я повторяю Observable, используя асинхронный канал:
<tr *ngFor = "let row of table | async | filter: searchText : searchKey">
Надеюсь, это поможет...
Было бы хорошо предоставить некоторый код, чтобы мы могли видеть, что вы делаете не так.