Winkel 2 - Ansicht wird nach Modelländerungen nicht aktualisiert

Ich habe eine einfache Komponente, die alle paar Sekunden eine REST-API aufruft und einige JSON-Daten zurückerhält. Ich kann anhand meiner Protokollanweisungen und des Netzwerkverkehrs erkennen, dass sich die zurückgegebenen JSON-Daten ändern und mein Modell aktualisiert wird. Die Ansicht ändert sich jedoch nicht.

Meine Komponente sieht aus wie:

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());
    }
}

Und meine Ansicht sieht aus wie:

<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>

Ich kann anhand der Ergebnisse sehen, console.log(this.recentDetections[0].macAddress)dass das RecentDetections-Objekt aktualisiert wird, aber die Tabelle in der Ansicht ändert sich nie, es sei denn, ich lade die Seite neu.

Ich kämpfe darum zu sehen, was ich hier falsch mache. Kann jemand helfen?

Es kann sein, dass der Code in Ihrem Dienst irgendwie aus Angulars Zone ausbricht. Dies unterbricht die Änderungserkennung. Das sollte funktionieren:

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());
    }
}

Weitere Möglichkeiten zum Aufrufen der Änderungserkennung finden Sie unter Manuelles Auslösen der Änderungserkennung in Angular

Alternative Möglichkeiten zum Aufrufen der Änderungserkennung sind

ChangeDetectorRef.detectChanges()

um die Änderungserkennung für die aktuelle Komponente und ihre untergeordneten Komponenten sofort auszuführen

ChangeDetectorRef.markForCheck()

um die aktuelle Komponente beim nächsten Mal einzubeziehen

ApplicationRef.tick()

um die Änderungserkennung für die gesamte Anwendung auszuführen

Es ist ursprünglich eine Antwort in den Kommentaren von @Mark Rajcok, aber ich möchte es hier als getestete und als Lösung mit ChangeDetectorRef funktionierende Lösung platzieren . Ich sehe hier einen guten Punkt:

Eine weitere Alternative ist zu injizieren ChangeDetectorRefund rufen cdRef.detectChanges()statt zone.run(). Dies könnte effizienter sein, da die Änderungserkennung nicht wie im gesamten Komponentenbaum ausgeführt zone.run()wird. - Mark Rajcok

Code muss also wie folgt aussehen:

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());
    }
}

Bearbeiten : Die Verwendung eines .detectChanges()internen Subscibe kann zu Problemen führen. Versuch, eine zerstörte Ansicht zu verwenden: detectChanges

Um es zu lösen, müssen Sie unsubscribevor dem Zerstören der Komponente Folgendes tun: Der vollständige Code lautet wie folgt:

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();
    }

}

Versuchen zu benutzen @Input() recentDetections: Array<RecentDetection>;

BEARBEITEN: Der Grund dafür@Input()ist, dass Sie den Wert in der Typoskript- / Javascript-Datei an die Ansicht (HTML) binden möchten. Die Ansicht aktualisiert sich selbst, wenn ein mit dem@Input()Dekoratordeklarierter Wertgeändert wird. Wenn ein@Input()oder@Output()Dekorator geändert wird, wird einngOnChanges-event ausgelöst und die Ansicht wird mit dem neuen Wert aktualisiert. Sie können sagen, dass der@Input()Wille den Wert in beide Richtungen bindet.

Suchen Sie nach Eingabe auf diesem Link nach Winkel: Glossar für weitere Informationen

BEARBEITEN: Nachdem ich mehr über die Entwicklung von Angular 2 erfahren hatte, stellte ich fest, dass@Input()es nicht die Lösung ist, wirklich etwas zutun, und wie in den Kommentaren erwähnt,

@Input() Dies gilt nur, wenn die Daten durch Datenbindung von außerhalb der Komponente geändert werden (gebundene Daten im übergeordneten Element wurden geändert), nicht, wenn die Daten vom Code innerhalb der Komponente geändert werden.

Wenn Sie sich die Antwort von @ Günter ansehen, ist dies eine genauere und korrektere Lösung des Problems. Ich werde diese Antwort hier behalten, aber bitte folge Günters Antwort als die richtige.

In meinem Fall hatte ich ein sehr ähnliches Problem. Ich habe meine Ansicht in einer Funktion aktualisiert, die von einer übergeordneten Komponente aufgerufen wurde, und in meiner übergeordneten Komponente habe ich vergessen, @ViewChild (NameOfMyChieldComponent) zu verwenden. Ich habe mindestens 3 Stunden nur für diesen dummen Fehler verloren. dh: Ich musste keine dieser Methoden anwenden:

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

Anstatt sich mit Zonen und Änderungserkennung zu befassen, lassen Sie AsyncPipe die Komplexität bewältigen. Dadurch werden beobachtbare Abonnements, Abbestellungen (um Speicherlecks zu vermeiden) und Änderungserkennung auf Angular-Schultern ausgeführt.

Ändern Sie Ihre Klasse, um eine beobachtbare Klasse zu erstellen, die Ergebnisse neuer Anforderungen ausgibt:

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));
    }
}

Und aktualisieren Sie Ihre Ansicht, um AsyncPipe zu verwenden:

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

Möchten Sie hinzufügen, dass es besser ist, einen Dienst mit einer Methode zu erstellen, die intervalArgumente akzeptiert, und:

• neue Anforderungen erstellen (indem Sie exhaustMapwie im obigen Code verwenden);
• Fehler behandeln Anfragen;
• Verhindern Sie, dass der Browser offline neue Anforderungen stellt.