Angular 4中如何控制表格显示，仅展示user_id为指定值的客户？

当然可以在Angular 4的HTML模板里实现这个需求！你猜测的*ngIf确实能用，不过还有更适配场景的写法，下面给你两种常用方案：

如果只是简单的固定值过滤，你可以借助<ng-container>来避免同一个元素上同时使用*ngFor和*ngIf的冲突（Angular不允许一个元素绑定多个结构型指令）。示例代码如下：

<table>
  <thead>
    <tr>
      <th>客户ID</th>
      <th>客户姓名</th>
      <!-- 其他表头字段 -->
    </tr>
  </thead>
  <tbody>
    <!-- 用ng-container承载遍历逻辑，tr上做条件判断 -->
    <ng-container *ngFor="let customer of customers">
      <tr *ngIf="customer.user_id === 1">
        <td>{{ customer.id }}</td>
        <td>{{ customer.name }}</td>
        <!-- 其他列数据展示 -->
      </tr>
    </ng-container>
  </tbody>
</table>

这种写法的好处是不用改动组件逻辑，快速生效，但如果你的客户数据量较大，每次渲染都做条件判断会有一定性能开销，所以更推荐下面的方案。

把过滤逻辑放在TypeScript组件里，提前生成只包含目标用户的数组，模板直接遍历这个过滤后的数组，不仅模板更简洁，性能也更好。

组件代码（TypeScript）： #

import { Component, OnInit } from '@angular/core';
// 假设你有对应的Customer接口和HTTP服务
import { Customer } from './customer.model';
import { CustomerService } from './customer.service';

@Component({
  selector: 'app-customer-table',
  templateUrl: './customer-table.component.html'
})
export class CustomerTableComponent implements OnInit {
  // 原始全量客户数据
  allCustomers: Customer[] = [];
  // 过滤后的目标客户数据
  targetCustomers: Customer[] = [];
  // 可以把目标user_id设为变量，方便后续动态修改
  targetUserId = 1;

  constructor(private customerService: CustomerService) {}

  ngOnInit(): void {
    // 从服务获取全量客户数据
    this.customerService.getCustomers().subscribe(customers => {
      this.allCustomers = customers;
      // 过滤出user_id等于targetUserId的客户
      this.targetCustomers = this.allCustomers.filter(customer => customer.user_id === this.targetUserId);
    });
  }
}

模板代码（HTML）： #

<table>
  <thead>
    <tr>
      <th>客户ID</th>
      <th>客户姓名</th>
      <!-- 其他表头字段 -->
    </tr>
  </thead>
  <tbody>
    <!-- 直接遍历过滤后的数组，无需再做条件判断 -->
    <tr *ngFor="let customer of targetCustomers">
      <td>{{ customer.id }}</td>
      <td>{{ customer.name }}</td>
      <!-- 其他列数据展示 -->
    </tr>
  </tbody>
</table>

这种方式的优势很明显：逻辑集中在组件层，模板只负责渲染，数据量大时性能更优，而且如果后续需要修改目标user_id（比如从路由参数、用户登录信息动态获取），只需要修改targetUserId变量即可，扩展性更强。

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