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()ทำ - มาร์ค Rajcok

ดังนั้นรหัสจะต้องเป็นดังนี้:

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()ภายใน subscibe อาจทำให้เกิดปัญหาได้พยายามใช้มุมมองที่ถูกทำลาย: 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()จะผูกค่าสองทาง

ค้นหาอินพุตในลิงค์นี้ตามเชิงมุม: อภิธานศัพท์สำหรับข้อมูลเพิ่มเติม

แก้ไข: หลังจากเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนา Angular 2 ฉันพบว่าการทำ@Input()จริงไม่ใช่วิธีแก้ปัญหาและตามที่กล่าวไว้ในความคิดเห็น

@Input() ใช้เฉพาะเมื่อข้อมูลมีการเปลี่ยนแปลงโดยการผูกข้อมูลจากภายนอกส่วนประกอบ (ข้อมูลที่ถูกผูกไว้ในพาเรนต์เปลี่ยนไป) ไม่ใช่เมื่อข้อมูลถูกเปลี่ยนจากโค้ดภายในคอมโพเนนต์

หากคุณได้ดูคำตอบของ@Günterมันเป็นวิธีแก้ปัญหาที่ถูกต้องและถูกต้องกว่า ฉันจะยังคงเก็บคำตอบนี้ไว้ที่นี่ แต่โปรดปฏิบัติตามคำตอบของGünterว่าเป็นคำตอบที่ถูกต้อง

ในกรณีของฉันฉันมีปัญหาที่คล้ายกันมาก ฉันกำลังอัปเดตมุมมองของฉันภายในฟังก์ชันที่ถูกเรียกโดยคอมโพเนนต์หลักและในองค์ประกอบหลักของฉันฉันลืมใช้ @ViewChild (NameOfMyChieldComponent) ฉันเสียเวลาอย่างน้อย 3 ชั่วโมงสำหรับความผิดพลาดโง่ ๆ นี้ กล่าวคือฉันไม่จำเป็นต้องใช้วิธีการใด ๆ เหล่านี้:

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

แทนที่จะจัดการกับโซนและเปลี่ยนแปลงการตรวจจับให้ AsyncPipe จัดการกับความซับซ้อน สิ่งนี้จะทำให้การสมัครสมาชิกที่สังเกตได้การยกเลิกการสมัคร (เพื่อป้องกันการรั่วไหลของหน่วยความจำ) และการตรวจจับการเปลี่ยนแปลงบนไหล่เชิงมุม

เปลี่ยนชั้นเรียนของคุณเพื่อให้สังเกตได้ซึ่งจะส่งผลลัพธ์ของคำขอใหม่:

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อาร์กิวเมนต์และ:

• สร้างคำขอใหม่ (โดยใช้exhaustMaplike ในโค้ดด้านบน);
• จัดการข้อผิดพลาดการร้องขอ
• หยุดเบราว์เซอร์ไม่ให้ส่งคำขอใหม่ขณะออฟไลน์