Angular 2 - Exibir não atualizando após alterações no modelo

Eu tenho um componente simples que chama uma API REST a cada poucos segundos e recebe de volta alguns dados JSON. Posso ver nas minhas instruções de log e no tráfego de rede que os dados JSON retornados estão mudando e meu modelo está sendo atualizado, no entanto, a exibição não está mudando.

Meu componente se parece com:

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

E minha visão se parece com:

<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)Pude ver pelos resultados que o objeto recentDetections está sendo atualizado, mas a tabela na exibição nunca muda, a menos que eu recarregue a página.

Estou lutando para ver o que estou fazendo de errado aqui. Alguém pode ajudar?

Pode ser que o código em seu serviço de alguma forma saia da zona da Angular. Isso interrompe a detecção de alterações. Isso deve funcionar:

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

Para outras maneiras de chamar a detecção de alterações, consulte Disparando manualmente a detecção de alterações no Angular.

Formas alternativas de chamar a detecção de alterações são

ChangeDetectorRef.detectChanges()

executar imediatamente a detecção de alterações para o componente atual e seus filhos

ChangeDetectorRef.markForCheck()

para incluir o componente atual na próxima vez que o Angular executar a detecção de alterações

ApplicationRef.tick()

executar a detecção de alterações para todo o aplicativo

É originalmente uma resposta nos comentários de @Mark Rajcok, mas quero colocá-lo aqui como testado e funcionou como uma solução usando o ChangeDetectorRef , vejo um bom ponto aqui:

Outra alternativa é injetar ChangeDetectorRefe chamar em cdRef.detectChanges()vez de zone.run(). Isso poderia ser mais eficiente, pois não executará a detecção de alterações em toda a árvore de componentes, como zone.run()faz. - Mark Rajcok

Portanto, o código deve ser como:

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

Editar : o uso de .detectChanges()subscibe interno pode levar ao problema Tente usar uma exibição destruída: detectChanges

Para resolvê-lo, você precisa unsubscribeantes de destruir o componente, para que o código completo seja como:

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

}

Tente usar @Input() recentDetections: Array<RecentDetection>;

EDIT: A razão pela qual@Input()é importante é porque você deseja vincular o valor no arquivo typescript / javascript à visualização (html). A visualização será atualizada se um valor declarado com o@Input()decorador for alterado. Se um@Input()ou@Output()decorador for alterado, umngOnChanges-event será acionado e a visualização será atualizada com o novo valor. Você pode dizer que o@Input()bidirecional vinculará o valor.

procure por Input neste link por angular: glossário para mais informações

EDIT: depois de aprender mais sobre o desenvolvimento do Angular 2, percebi que fazer@Input()realmente não é a solução e, conforme mencionado nos comentários,

@Input() aplica-se apenas quando os dados são alterados pela ligação de dados de fora do componente (os dados vinculados no pai foram alterados) e não quando os dados são alterados do código dentro do componente.

Se você der uma olhada na resposta da Günter, é uma solução mais precisa e correta para o problema. Ainda vou manter essa resposta aqui, mas siga a resposta de Günter como a correta.

No meu caso, eu tive um problema muito semelhante. Eu estava atualizando minha visão dentro de uma função que estava sendo chamada por um componente pai, e no meu componente pai esqueci de usar @ViewChild (NameOfMyChieldComponent). Perdi pelo menos 3 horas apenas por esse erro estúpido. ou seja: eu não precisei usar nenhum desses métodos:

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

Em vez de lidar com zonas e detecção de alterações - deixe o AsyncPipe lidar com a complexidade. Isso colocará assinatura observável, cancelamento de assinatura (para evitar vazamentos de memória) e detecção de alterações nos ombros angulares.

Mude sua classe para tornar um observável, que emitirá resultados de novas solicitações:

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

E atualize sua visualização para usar o AsyncPipe:

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

Quer acrescentar que é melhor fazer um serviço com um método que terá intervalargumentos e:

• crie novas solicitações (usando exhaustMapcomo no código acima);
• lidar com pedidos de erros;
• impedir que o navegador faça novas solicitações enquanto estiver offline.