如何使用 Angular 材料从后端获取标签作为名称属性？答案

【问题标题】：How to get labels as name propery from the backend with Angular material?如何使用 Angular 材料从后端获取标签作为名称属性？
【发布时间】：2019-12-10 11:59:17
【问题描述】：

我正在使用角材料表。数据来自后端。

我有一个 clolumn 标题项目。如果您将鼠标悬停在标题上，则会出现带有项目名称的复选框。

我有复选框。但是如何通过复选框显示项目名称？

我有这个：

模板：

     <ng-container matColumnDef="projects">
        <th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
          <mat-checkbox
          [style.opacity]="show ? 1 : 0"
          (click)="$event.stopPropagation()"
          (change)="selection[0]=$event.isChecked"
          [checked]="selection[0]"
          >
          </mat-checkbox>
          Projects
        </th>
        <td mat-cell *matCellDef="let row">{{ row.projects }}</td>
      </ng-container>

和ts脚本：


export class ListComponent implements OnInit, OnDestroy {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  public readonly displayedColumns = ['selectParticipant', 'fullName', 'dateOfBirth', 'projects', 'view'];
  public searchExpanded = false;

  selectedValue: string;
  startDate: Date;
  data: Observable<ParticipantInfoDTO[]>;
  dataSource$: Observable<ParticipantInfoDTO>;
  participantInfo: ParticipantInfoDTO[] = [];
  datasource = new MatTableDataSource<ParticipantInfoDTO>(this.participantInfo);
  subscription: Subscription;
  selection = new SelectionModel<ParticipantInfoDTO>(true, []);
  participant: ParticipantInfoDTO;
  selectedProject: string;
  public participantIds: string[] = [];
  public projectIds : string[] = [];

  constructor(
    private dialog: MatDialog,
    route: ActivatedRoute,
    private extendedSearchFilterService: ExtendedSearchService,
    private selectedParticipantsService: SelectedParticipantsService,
    private dialogModelService: DialogModalService
  ) {
    const allParticipants: any[] = route.snapshot.data['participants'];
    this.extendedSearchFilterService.updateDataSource(allParticipants);
  }

  ngOnInit() {
    this.fetchDataSource();


    }); 
  }

}

那么我要改变什么？

我是这样尝试的：

 <ng-container matColumnDef="projects">
        <th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
          <mat-checkbox
          [style.opacity]="show ? 1 : 0"
          (click)="$event.stopPropagation()"
          (change)="selection[0]=$event.isChecked"
          [checked]="selection[0]"
          >{{row.projects}}
          </mat-checkbox>
          Projects
        </th>
        <td mat-cell *matCellDef="let row">{{ row.projects }}</td>
      </ng-container>

然后我得到这个错误：

ListComponent.html:82 ERROR TypeError: Cannot read property 'projects' of undefined
    at Object.eval [as updateRenderer] (ListComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:2045

【问题讨论】：

是元素 <td mat-cell *matCellDef="let element"> {{element.projects}} </td>
可以在stackblitz上提供整个组件吗？
我这样做了： {{element.projects}} 但我什么也没看到，但也没有错误

标签： javascript angular angular-material

【解决方案1】：

如果我正确理解您的问题，问题是您显示的列不是这些静态列public readonly displayedColumns = ['selectParticipant', 'fullName', 'dateOfBirth', 'projects', 'view'];

displayedColumns 应该是您的项目名称的动态列表。

所以，基本上你必须转置你的数据表，使列变成行，行变成列。

查看我根据 Stackblitz 中的 Angular Material Basic Table 示例制作的示例：https://stackblitz.com/edit/angular-g7reoi?file=src%2Fapp%2Ftable-basic-example.ts

不是一件容易的事！它显示了如何转置列标题，但您仍然必须找到一种方法来转置数据。在示例中，我只是创建了一个假的转置数据结构。

【讨论】：