Angular组件接收接口数据成功但视图未更新问题求助

问题原因 #

你遇到的是Angular变更检测未触发的问题，304状态码是浏览器正常的缓存协商逻辑，和视图不更新没有关联，控制台能打印到有效值说明数据赋值逻辑本身正常，问题出在赋值操作没有触发Angular的视图重渲染。

解决方案 #

按优先级逐一尝试： #

方案1：手动标记组件需要变更检测

大部分场景下该方案即可解决问题，适用于组件/父组件启用了OnPush变更检测策略，或者异步回调不在Angular变更检测监听范围内的场景。
修改你的component.ts代码如下：

import { Component, OnInit, Input, Output, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TermsService } from '../../core/services/terms.service';


@Component({
    selector: 'app-terms',
    templateUrl: './terms.component.html',
    styleUrls: ['./terms.component.css']
})
export class TermsComponent implements OnInit {
    terms: string = ''; // 建议给初始值避免模板渲染undefined报错
    constructor(private termsService: TermsService, private cdr: ChangeDetectorRef) {

    }

    ngOnInit() {
        this.termsService.getProperties().subscribe(
            (data: any) => { // 你这里取data['terms']说明data是对象，不要写any[]类型
                console.log('received data='+data);
                this.terms = data['terms'];
                // 新增：手动标记组件需要进行变更检测
                this.cdr.markForCheck();
            },(error)=> {
                console.log('Error getting terms'+error);
            },() => {
                console.log('Completed terms call');
            }
        );
    };
}

方案2：强制将赋值逻辑运行在Angular Zone中

如果方案1无效，说明你的请求回调逻辑运行在了Angular Zone之外，导致Angular监听不到异步事件，用NgZone包裹赋值逻辑即可：
修改component.ts代码如下：

import { Component, OnInit, Input, Output, NgZone } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TermsService } from '../../core/services/terms.service';


@Component({
    selector: 'app-terms',
    templateUrl: './terms.component.html',
    styleUrls: ['./terms.component.css']
})
export class TermsComponent implements OnInit {
    terms: string = '';
    constructor(private termsService: TermsService, private zone: NgZone) {

    }

    ngOnInit() {
        this.termsService.getProperties().subscribe(
            (data: any) => { 
                console.log('received data='+data);
                // 新增：用NgZone包裹赋值逻辑
                this.zone.run(() => {
                    this.terms = data['terms'];
                })
            },(error)=> {
                console.log('Error getting terms'+error);
            },() => {
                console.log('Completed terms call');
            }
        );
    };
}

方案3：排查TermsService实现

如果以上两个方案都无效，需要检查TermsService的getProperties方法实现：

• 确认是否使用Angular官方的HttpClient发起请求，不要使用原生XMLHttpRequest或者第三方请求库
• 确认没有在getProperties方法中使用NgZone.runOutsideAngular方法跳过Angular Zone监听
• 确认rxjs相关的操作符没有切换到自定义的调度器，导致回调跑出Angular Zone

内容的提问来源于stack exchange，提问作者Woodsman