Angular 4模板* ng如果在收到響應后未更新

Question

出於某種原因，我的模板似乎沒有更新以顯示仍然正確接收的對象

顯示日期屬性的簡單模板cast-detail.component.html

<div *ngIf="cast">
  {{ cast.date }}
</div>

cast-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import 'rxjs/add/operator/switchMap';

import { Cast } from './cast';
import { CastsService } from './casts.service';

import { PicService } from './pic.service';

@Component({
  selector: 'app-cast-detail',
  templateUrl: './cast-detail.component.html',
  styleUrls: ['./cast-detail.component.css']
})
export class CastDetailComponent implements OnInit {
  cast: Cast;
  pics: string[];

  constructor(
    private castsService: CastsService,
    private picService: PicService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.route.paramMap
      .switchMap((params: ParamMap) => this.castsService.getCast(params.get('date')))
      .subscribe(cast => {this.cast = cast; console.log(this.cast)});


    this.route.paramMap
      .switchMap((params: ParamMap) => this.picService.getPics(params.get('date')))
      .subscribe(pics => this.pics = pics);
  }

}

console.log(this.cast)顯示該對象在某個時刻已正確接收，但是模板從未更新，它什么也沒有呈現。 我發現更加令人困惑的是，僅提供字符串數組的PicService可以正常工作。 我也有一個依賴CastService顯示演員表列表的組件，它的功能也很完善。 這兩種方法都沒有* ngIf標記...，但是{{ cast.date }}屬性會引發錯誤TypeError: _co.cast is undefined沒有* ngIf，則TypeError: _co.cast is undefined的，並且如果* ngIf存在，則永遠不會更新。

我的兩個服務非常簡單：

casts.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class CastsService {
  api: string = 'http://localhost:3000/api/casts';

  constructor(private http: Http) {
  }

  getCast(date: string) {
    const url = `${this.api}/${date}`;
    return this.http.get(url)
      .map(res => res.json());
  }

  getAllCasts() {
    return this.http.get(this.api)
      .map(res => res.json());
  }
}

pic.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class PicService {
  api: string = "http://localhost:3000/api/pic";

  constructor(private http: Http) {
  }

  getPics(date: string) {
    const url = `${this.api}/${date}`;
    return this.http.get(url)
      .map(res => res.json());
  }
}

任何幫助，將不勝感激

Answer 1

我在代碼中也注意到了相同的問題，我通過強制更改檢測周期解決了該問題。 this.cdr.detectChanges（）應該具有魔力。

使用ChangeDetectorRef：

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

constructor(private cdr: ChangeDetectorRef, ....) {}

ngOnInit(): void {
    this.route.paramMap
        .switchMap((params: ParamMap) => this.castsService.getCast(params.get('date')))
        .subscribe(cast => {
            this.cast = cast;
            console.log(this.cast);
            this.cdr.detectChanges();
    });
}

替代解決方案可以是將“ cast”類型轉換為“ Observable”類型，並在HTML中使用“ async”管道。

<div *ngIf="!!(cast$ | async)">
  {{ (cast$ | async).date }}

import {
Component,
OnInit,
ChangeDetectorRef
} from '@angular/core';
import { Observable } from 'rxjs/Observable';

cast$: Observable<Cast>;

constructor(private cdr: ChangeDetectorRef, ....) {}

ngOnInit(): void {
    this.cast$ = this.route.paramMap
    .switchMap((params: ParamMap) => this.castsService.getCast(params.get('date')))
    .map(cast => {
        console.log(cast);
        return cast;
    });
}