Angular表格仅显示首行：从服务器获取动态数据异常求助

嘿，我来帮你捋捋这个问题！你说从服务器拉取动态数据渲染表格，但只显示第一行，结合你贴的代码，我整理了几个最可能的原因和解决办法：

1. 先确认后端返回的数据结构是否正确 #

你的Service用post请求获取数据，但要注意后端返回的是不是直接的数组格式？很多时候后端会把数组包在一个对象里，比如返回{ data: [{}, {}, ...] }这种结构。这时候你直接写this.values = data就会出问题——因为data不是数组，而是包含数组的对象，*ngFor没法正确遍历。

你可以看看控制台里console.log(data)的输出：

• 如果是类似[{...}, {...}]的纯数组，那这部分没问题；
• 如果是{ data: [{...}, {...}] }，那你得改成this.values = data.data才能拿到真正的数组数据。

2. 检查HTML表格的*ngFor循环位置 #

你没贴全HTML的部分，但很大概率是*ngFor的位置写错了！正确的做法是把*ngFor放在<tbody>里的<tr>标签上，这样每一条数据都会生成一行。比如正确的写法应该是：

<table class="table table-striped">
  <thead>
    <tr>
      <!-- 这里是你的表头列，比如<th>用户名</th><th>角色</th> -->
    </tr>
  </thead>
  <tbody>
    <!-- 重点：*ngFor要写在<tr>上，遍历values数组的每一项 -->
    <tr *ngFor="let user of values">
      <td>{{ user.username }}</td>
      <td>{{ user.role_name }}</td>
      <!-- 其他列根据你的数据字段调整 -->
    </tr>
  </tbody>
</table>

要是你把*ngFor放在了<thead>的上，或者放在了、标签上，就会导致循环逻辑错误，只渲染一行。

3. 确认数组确实包含多条数据 #

再仔细看看控制台的console.log(data)输出，确保返回的数组里有多个元素。如果后端本身只返回了一条数据，那表格自然只显示一行啦😅

额外排查：变更检测问题（概率较低） #

虽然HttpClient的subscribe回调里赋值默认会触发Angular的变更检测，但如果你的组件用了OnPush变更检测策略，也可以手动触发试试：

• 先在组件里注入ChangeDetectorRef：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private _userService: UserService, private cdr: ChangeDetectorRef) {}
  

• 赋值后调用检测：

  this._userService.get_user_details(this._user.role_name)
  .subscribe( (data: any[]) => {
    console.log('send');
    console.log(data);
    // 这里根据数据结构调整赋值
    this.values = data;
    this.cdr.detectChanges();
  } )
  

先从前面两点排查，这是最常见的原因！

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