如何将元素映射到mat-table中的多个属性答案

【问题标题】：How to map element to several attributes in mat-table如何将元素映射到mat-table中的多个属性
【发布时间】：2021-03-15 15:27:45
【问题描述】：

给定一个特定对象，我想在 mat-table 中显示它的枚举字符串值和特定颜色的图标。

例如，我有一个具有枚举状态的数据类：

export enum Status {
  Todo = 'Todo',
  InProgress = 'In Progress',
  Done = 'Done'
}

export interface DataItem {
  id: number;
  status: Status;  // that custom enum from above
}

项目列表的最终结果应该是这样的：

<tr>
  <td>1</td>
  <td><mat-icon class='gray;' title='Todo'> build </mat-icon></td>
</tr>
<tr>
  <td>2</td>
  <td><mat-icon class='yellow;' title='InProgress'> hourglass_empty</mat-icon></td>
</tr>
<tr>
  <td>3</td>
  <td><mat-icon class='green;' title='Todo'>check_circle</mat-icon></td>
</tr>

具体来说，我想设置：

图标颜色（使用 css 类或直接使用），
图标名称（使用素材图标），
title 属性（使用枚举值）。

所以我的方法基本上是创建几个方法来返回模板的这三个属性：

// in mytable.component.ts

  getIconName(item : DataItem) {
    switch (item.status) {
      case Status.Todo: 
        return "build";
      case Status.InProgress:
        return "hourglass_empty";
      case Status.Done:
        return "check_circle";
    }
  }
  
  getClass(item : DataItem) {
    switch (item.status) {
      case Status.Todo: 
        return "gray";
      case Status.InProgress:
        return "yellow";
      case Status.Done:
        return "green";
    }
  }
  
  getTitle(item : DataItem) {
    switch (item.status) {
      case Status.Todo: 
        return "To Do";
      case Status.InProgress:
        return "In Progress";
      case Status.Done:
        return "Done";
    }
  }

然后在模板中调用这些方法，有点：

<mat-cell *matCellDef="let element" 
    title="{{getTitle(element)}}" 
    class="{{getClass(element)}}">
  <mat-icon> {{getIcon(element)}} </mat-icon>
</mat-cell>

但我觉得我做错了什么，这一切都应该在不直接调用这些方法的情况下完成。

【问题讨论】：

是的，使用管道而不是调用这些方法
@Double-expresso：谢谢！所以，我们的想法是创建一个管道，将DataItem 转换为一个完全不同的对象，该对象将包含所有这些属性？
或者你有一个你想要的值的管道 - title={{ element | itemTitle }} 或 title={{ element.status | itemTitle }}。这将比您当前的解决方案更有效，因为Angular assumes pipes are pure，而方法会被调用很多。

标签： angular angular-material mat-table mat-icon

【解决方案1】：

另一种方式

export enum Status {
  Todo = 'Todo',
  InProgress = 'In Progress',
  Done = 'Done'
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  status = Status;

  constructor() {}
}

<td>
  <mat-icon
    class="{{item.status == status.Todo ? 'gray' : item.status == status.Done ? 'green' : 'yellow'}}"
    title="{{status.Todo}}">
    {{item.status == status.Todo ? 'build' : item.status == status.Done ? 'check_circle' : 'hourglass_empty'}}
  </mat-icon>
</td>

检查标题是否正确，因为我不确定您希望它是“待办事项”还是“待办事项”

这里是 StackBlitz，https://stackblitz.com/edit/angular-ivy-qkhtsx

【讨论】：