如何使用 Angular 材料从后端获取标签作为名称属性? [英] How to get labels as name propery from the backend with Angular material?

问题描述

我正在使用角材料表.并且数据来自后端.

I am using angular material table. And the data comes from the backend.

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

And I have a clolumn header projects. And if you hover over the header then there will appear checkboxes with the name of the projects.

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

I have the checkbox. But how to show the project names by the checkboxes?

我有这个:

模板:

     <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脚本:

；dataSource$: Observable;参与者信息:参与者信息DTO[] = [];datasource = new MatTableDataSource(this.participantInfo);订阅:订阅；selection = new SelectionModel(true, []);参与者:ParticipantInfoDTO；selectedProject:字符串；公共参与者 ID:字符串 [] = [];公共项目Ids:字符串[] = [];构造函数(私人对话:MatDialog，路线:激活路线，私有扩展搜索过滤服务:扩展搜索服务，私人 selectedParticipantsService: SelectedParticipantsService,私有 dialogModelService:DialogModalService){const allParticipants: any[] = route.snapshot.data['participants'];this.extendedSearchFilterService.updateDataSource(allParticipants);}ngOnInit() {this.fetchDataSource();});}}

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

推荐答案

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

If I understood your question correctly, the problem is that your displayed columns are not these static columns public readonly displayedColumns = ['selectParticipant', 'fullName', 'dateOfBirth', 'projects', 'view'];

插入的 displayedColumns 应该是项目名称的动态列表.

Insted the displayedColumns should be a dynamic list of your project names.

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

So, basically you have to transpose your data table so that the columns become rows and the rows become columns.

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

Check this example I made based on Angular Material Basic Table example in Stackblitz: https://stackblitz.com/edit/angular-g7reoi?file=src%2Fapp%2Ftable-basic-example.ts

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

Not an easy task! It shows how to transpose the column headers but you still have to find a way to transpose the data. In the example I just created a fake transposed data structure.

这篇关于如何使用 Angular 材料从后端获取标签作为名称属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！