ASP.NET Core+Angular8同方案下单向绑定不显示但控制台有数据

嘿，我一眼就揪出问题所在了——你遇到的是异步操作顺序导致的分页配置未更新，虽然API成功返回了数据、控制台也能打印，但分页组件根本不知道有新数据进来，所以*ngFor自然不会渲染内容。咱们一步步来搞定：

问题根源分析 #

看你的ngOnInit代码：

ngOnInit() {
  this.policiesService.getPolicies().subscribe(data => {
    this.policies = data;
    console.log(this.policies)
  });
  this.config = { itemsPerPage: 10, currentPage: 1, totalItems: this.policies.length };
}

API请求是异步的，也就是说this.config的初始化会先于API数据返回完成。此时this.policies还是空数组，totalItems被设为0，分页组件会认为没有数据需要渲染——哪怕之后this.policies被赋值了，config也没跟着更新。

解决方案 #

1. 把分页配置更新放到API回调里

等数据真正返回后再初始化/更新config，保证totalItems拿到的是真实的数据长度：

ngOnInit() {
  this.policiesService.getPolicies().subscribe(data => {
    this.policies = data;
    console.log(this.policies);
    // 数据回来后再设置分页配置
    this.config = { 
      itemsPerPage: 10, 
      currentPage: 1, 
      totalItems: this.policies.length 
    };
  });
}

2. 给数组加上明确的类型定义

虽然TypeScript会做隐式类型推断，但明确类型能避免很多潜在问题，把policies的定义改成：

policies: StagingPrepPolicies[] = [];

3. （可选）手动触发变更检测（如果上述方法无效）

如果你的组件用了OnPush变更检测策略（虽然你没设置，但以防万一），可以注入ChangeDetectorRef手动通知Angular更新视图：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
// ...其他导入

constructor(
  private policiesService: PoliciesDataServiceService,
  private cdr: ChangeDetectorRef) { }

ngOnInit() {
  this.policiesService.getPolicies().subscribe(data => {
    this.policies = data;
    console.log(this.policies);
    this.config = { 
      itemsPerPage: 10, 
      currentPage: 1, 
      totalItems: this.policies.length 
    };
    // 手动触发变更检测
    this.cdr.detectChanges();
  });
}

为什么之前分开解决方案时没问题？ #

大概率是之前的API请求响应速度快，或者你在其他地方间接更新了分页配置，但合并后异步操作的顺序问题被放大了。核心还是要保证异步数据返回后再处理依赖它的配置项。

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