Angular 2 - просмотр не обновляется после изменения модели

У меня есть простой компонент, который вызывает REST api каждые несколько секунд и получает обратно некоторые данные JSON. По операторам журнала и сетевому трафику я вижу, что возвращаемые данные JSON меняются, и моя модель обновляется, однако представление не меняется.

Мой компонент выглядит так:

import {Component, OnInit} from 'angular2/core';
import {RecentDetectionService} from '../services/recentdetection.service';
import {RecentDetection} from '../model/recentdetection';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'recent-detections',
    templateUrl: '/app/components/recentdetection.template.html',
    providers: [RecentDetectionService]
})



export class RecentDetectionComponent implements OnInit {

    recentDetections: Array<RecentDetection>;

    constructor(private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { this.recentDetections = recent;
             console.log(this.recentDetections[0].macAddress) });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        timer.subscribe(() => this.getRecentDetections());
    }
}

И мой взгляд выглядит так:

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading"><h3>Recently detected</h3></div>
    <div class="panel-body">
        <p>Recently detected devices</p>
    </div>

    <!-- Table -->
    <table class="table" style="table-layout: fixed;  word-wrap: break-word;">
        <thead>
            <tr>
                <th>Id</th>
                <th>Vendor</th>
                <th>Time</th>
                <th>Mac</th>
            </tr>
        </thead>
        <tbody  >
            <tr *ngFor="#detected of recentDetections">
                <td>{{detected.broadcastId}}</td>
                <td>{{detected.vendor}}</td>
                <td>{{detected.timeStamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>{{detected.macAddress}}</td>
            </tr>
        </tbody>
    </table>
</div>

По результатам я вижу, console.log(this.recentDetections[0].macAddress)что объект latestDetections обновляется, но таблица в представлении никогда не изменяется, пока я не перезагружу страницу.

Я изо всех сил пытаюсь понять, что я здесь делаю не так. Кто-нибудь может помочь?

Возможно, код в вашем сервисе каким-то образом вырывается из зоны Angular. Это нарушает обнаружение изменений. Это должно работать:

import {Component, OnInit, NgZone} from 'angular2/core';

export class RecentDetectionComponent implements OnInit {

    recentDetections: Array<RecentDetection>;

    constructor(private zone:NgZone, // <== added
        private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { 
                 this.zone.run(() => { // <== added
                     this.recentDetections = recent;
                     console.log(this.recentDetections[0].macAddress) 
                 });
        });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        timer.subscribe(() => this.getRecentDetections());
    }
}

Чтобы узнать о других способах вызова обнаружения изменений, см. Запуск обнаружения изменений вручную в Angular.

Альтернативные способы вызова обнаружения изменений:

ChangeDetectorRef.detectChanges()

для немедленного запуска обнаружения изменений для текущего компонента и его дочерних элементов

ChangeDetectorRef.markForCheck()

чтобы включить текущий компонент в следующий раз, когда Angular выполнит обнаружение изменений

ApplicationRef.tick()

запустить обнаружение изменений для всего приложения

Изначально это ответ в комментариях от @Mark Rajcok, но я хочу разместить его здесь как протестированное и работающее как решение с использованием ChangeDetectorRef , я вижу здесь хороший момент:

Другой вариант - ввести ChangeDetectorRefи вызвать cdRef.detectChanges()вместо zone.run(). Это могло бы быть более эффективным, поскольку оно не будет запускать обнаружение изменений по всему дереву компонентов, как это zone.run()делает. - Марк Райкок

Итак, код должен быть таким:

import {Component, OnInit, ChangeDetectorRef} from 'angular2/core';

export class RecentDetectionComponent implements OnInit {

    recentDetections: Array<RecentDetection>;

    constructor(private cdRef: ChangeDetectorRef, // <== added
        private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { 
                this.recentDetections = recent;
                console.log(this.recentDetections[0].macAddress);
                this.cdRef.detectChanges(); // <== added
            });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        timer.subscribe(() => this.getRecentDetections());
    }
}

Изменить : использование .detectChanges()внутри подписки может привести к проблеме Попытка использовать уничтоженное представление: detectChanges

Чтобы решить эту проблему, вам нужно unsubscribeперед тем, как уничтожить компонент, поэтому полный код будет примерно таким:

import {Component, OnInit, ChangeDetectorRef, OnDestroy} from 'angular2/core';

export class RecentDetectionComponent implements OnInit, OnDestroy {

    recentDetections: Array<RecentDetection>;
    private timerObserver: Subscription;

    constructor(private cdRef: ChangeDetectorRef, // <== added
        private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { 
                this.recentDetections = recent;
                console.log(this.recentDetections[0].macAddress);
                this.cdRef.detectChanges(); // <== added
            });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        this.timerObserver = timer.subscribe(() => this.getRecentDetections());
    }

    ngOnDestroy() {
        this.timerObserver.unsubscribe();
    }

}

Попробуй использовать @Input() recentDetections: Array<RecentDetection>;

РЕДАКТИРОВАТЬ: причина@Input()важности заключается в том, что вы хотите привязать значение в файле typescript / javascript к представлению (html). Представление обновится, если значение, объявленное с помощью@Input()декоратора, изменится. Еслидекоратор@Input()или@Output()изменяется,ngOnChanges-event запускается, и представление обновляется с новым значением. Вы можете сказать, что значение@Input()будет двусторонним.

поиск Input по этой ссылке с помощью angular: глоссарий для получения дополнительной информации

РЕДАКТИРОВАТЬ: узнав больше о разработке Angular 2, я решил, что это@Input()действительно не решение, и, как упоминалось в комментариях,

@Input() применяется только тогда, когда данные изменяются посредством привязки данных извне компонента (привязанные данные в родительском элементе изменены), а не когда данные изменяются из кода внутри компонента.

Если вы посмотрите ответ @ Günter, это более точное и правильное решение проблемы. Я все равно сохраню этот ответ здесь, но, пожалуйста, следуйте ответу Гюнтера как правильному.

В моем случае у меня была очень похожая проблема. Я обновлял свое представление внутри функции, которая вызывалась родительским компонентом, а в моем родительском компоненте я забыл использовать @ViewChild (NameOfMyChieldComponent). Я потерял как минимум 3 часа только из-за этой глупой ошибки. то есть: мне не нужно было использовать ни один из этих методов:

• ChangeDetectorRef.detectChanges ()
• ChangeDetectorRef.markForCheck ()
• ApplicationRef.tick ()

Вместо того, чтобы иметь дело с зонами и обнаружением изменений - позвольте AsyncPipe справиться со сложностью. Это поместит наблюдаемую подписку, отказ от подписки (для предотвращения утечек памяти) и обнаружение изменений на плечах Angular.

Измените свой класс, чтобы сделать наблюдаемым, который будет выдавать результаты новых запросов:

export class RecentDetectionComponent implements OnInit {

    recentDetections$: Observable<Array<RecentDetection>>;

    constructor(private recentDetectionService: RecentDetectionService) {
    }

    ngOnInit() {
        this.recentDetections$ = Observable.interval(5000)
            .exhaustMap(() => this.recentDetectionService.getJsonFromApi())
            .do(recent => console.log(recent[0].macAddress));
    }
}

И обновите свое представление, чтобы использовать AsyncPipe:

<tr *ngFor="let detected of recentDetections$ | async">
    ...
</tr>

Хочу добавить, что лучше сделать сервис с методом, который будет принимать intervalаргументы, и:

• создавать новые запросы (используя exhaustMapкак в коде выше);
• обрабатывать ошибки запросов;
• запретить браузеру делать новые запросы в автономном режиме.