Angular 13中Mat Table文件下载图标按需显示问题求助

1. 完善TypeScript方法 #

先补全setFile方法的逻辑，确保URL不存在时返回null，避免绑定无效值：

setFile(url: string): string | null {
  if (url?.trim()) { // 同时处理null、undefined和空字符串场景
    this.DisplayFileUrl = this.congesService.getFilePath(url);
    return this.DisplayFileUrl;
  }
  return null; // URL无效时返回null
}

2. 在HTML中添加条件渲染 #

给<a>标签加上*ngIf判断，只有当URL有效时才显示下载图标：

</ng-container>
<ng-container matColumnDef="fileUrl">
  <th mat-header-cell *matHeaderCellDef> url </th>
  <td mat-cell *matCellDef="let element"> 
    <a 
      *ngIf="element.fileUrl?.trim()" 
      [href]="setFile(element.fileUrl)" 
      target="_blank"
    >
      <i class="fas fa-file-pdf"></i>
    </a>
  </td>
</ng-container>

可选优化：简化模板逻辑 #

如果不需要在组件中存储DisplayFileUrl，可以直接在模板调用服务方法，省去组件中的setFile方法：

</ng-container>
<ng-container matColumnDef="fileUrl">
  <th mat-header-cell *matHeaderCellDef> url </th>
  <td mat-cell *matCellDef="let element"> 
    <a 
      *ngIf="element.fileUrl?.trim()" 
      [href]="congesService.getFilePath(element.fileUrl)" 
      target="_blank"
    >
      <i class="fas fa-file-pdf"></i>
    </a>
  </td>
</ng-container>

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