Question

似乎，出于某种原因，我的模板没有更新以显示仍然被正确接收的对象

显示日期属性的简单模板， cast-detail.component.html

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

铸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，如果* 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();
    });
}

替代解决方案可以是，转换＆＃39;演员＆＃39;到可观察的＆＃39;键入并使用＆＃39; async＆＃39;用HTML管道。

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

Angular 4模板* ngIf收到回复后未更新

1 个答案: