在可自定义Angular数据表中使用条件图标

我来帮你搞定这个条件显示图标的问题！核心思路是让你的数据表组件能把当前行的数据传递给父组件投影的内容，这样父组件就能根据行数据动态判断显示哪个图标。下面是一步步的实现方案：

1. 改造数据表组件（TableComponent） #

首先我们需要让TableComponent支持接收自定义模板，并且能把当前行数据传递给这些模板。

table.component.ts #

import { Component, Input, ContentChildren, QueryList, TemplateRef } from '@angular/core';

// 定义列的配置接口，标记哪些列需要自定义模板
interface TableColumn {
  key: string;
  label: string;
  hasCustomTemplate?: boolean; // 可选，标记是否使用自定义模板
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  @Input() dataSource: any[] = []; // 数据源
  @Input() columns: TableColumn[] = []; // 列配置

  // 获取父组件传递的所有自定义列模板（通过#columnTemplate标记）
  @ContentChildren('columnTemplate') columnTemplates!: QueryList<TemplateRef<any>>;

  // 根据列的key匹配对应的模板
  getColumnTemplate(columnKey: string): TemplateRef<any> | undefined {
    return this.columnTemplates.find(template => 
      template.elementRef.nativeElement.getAttribute('data-key') === columnKey
    );
  }
}

table.component.html #

在模板里遍历数据和列，对有自定义模板的列，把当前行数据作为上下文传递给模板：

<table class="custom-table">
  <thead>
    <tr>
      <th *ngFor="let col of columns">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of dataSource">
      <td *ngFor="let col of columns">
        <!-- 优先使用自定义模板 -->
        <ng-container *ngIf="getColumnTemplate(col.key); let template">
          <ng-template 
            [ngTemplateOutlet]="template" 
            [ngTemplateOutletContext]="{ $implicit: row }"
          ></ng-template>
        </ng-container>
        <!-- 没有自定义模板时显示默认数据 -->
        <span *ngIf="!getColumnTemplate(col.key)">{{ row[col.key] }}</span>
      </td>
    </tr>
  </tbody>
</table>

2. 在父组件（AppComponent）中使用条件图标 #

现在你可以在父组件里为特定列定义带条件判断的图标模板，利用传递过来的行数据做判断。

app.component.ts #

先准备好测试数据和列配置：

import { Component } from '@angular/core';

// 定义数据接口
interface User {
  id: number;
  name: string;
  status: 'active' | 'inactive' | 'pending';
  role: 'admin' | 'user';
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 测试数据源
  users: User[] = [
    { id: 1, name: 'Alice', status: 'active', role: 'admin' },
    { id: 2, name: 'Bob', status: 'pending', role: 'user' },
    { id: 3, name: 'Charlie', status: 'inactive', role: 'user' }
  ];

  // 列配置，标记需要自定义模板的列
  columns = [
    { key: 'id', label: 'ID' },
    { key: 'name', label: '姓名' },
    { key: 'status', label: '状态', hasCustomTemplate: true },
    { key: 'role', label: '角色', hasCustomTemplate: true }
  ];
}

app.component.html #

使用<app-table>组件，并为需要条件图标的列投影自定义模板：

<app-table [dataSource]="users" [columns]="columns">
  <!-- 状态列的自定义模板：根据status显示不同图标 -->
  <ng-template #columnTemplate data-key="status" let-row>
    <span class="icon active" *ngIf="row.status === 'active'">✅</span>
    <span class="icon pending" *ngIf="row.status === 'pending'">⏳</span>
    <span class="icon inactive" *ngIf="row.status === 'inactive'">❌</span>
  </ng-template>

  <!-- 角色列的自定义模板：根据role显示不同图标 -->
  <ng-template #columnTemplate data-key="role" let-row>
    <span class="icon admin" *ngIf="row.role === 'admin'">🔧</span>
    <span class="icon user" *ngIf="row.role === 'user'">👤</span>
  </ng-template>
</app-table>

3. 额外优化（可选） #

• 使用图标库：上面用的是emoji图标，你可以换成Font Awesome或者Angular Material的图标组件，比如：

  <!-- 假设已经引入了Font Awesome -->
  <fa-icon [icon]="faCheckCircle" class="text-green" *ngIf="row.status === 'active'"></fa-icon>
  

• 样式美化：给图标加一些CSS样式，让它们更美观：

  .icon {
    font-size: 1.2rem;
    margin: 0 auto;
    display: block;
  }
  .active { color: #10b981; }
  .pending { color: #f59e0b; }
  .inactive { color: #ef4444; }
  

关键原理说明 #

• 我们通过@ContentChildren获取父组件传递的所有模板，然后根据data-key属性匹配对应的列。
• 使用ngTemplateOutletContext把当前行数据（row）传递给模板，父组件通过let-row接收这个上下文变量。
• 父组件里的*ngIf就可以基于row的属性值，动态决定显示哪个图标。

这样就能完美实现基于列数据的条件性图标显示啦！

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