javascript - 如何使用 Angular 材料从后端获取标签作为名称属性?
问题描述
我正在使用角材料表。数据来自后端。
我有一个 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
解决方案
如果我正确理解您的问题,问题是您显示的列不是这些静态列public readonly displayedColumns = ['selectParticipant', 'fullName', 'dateOfBirth', 'projects', 'view'];
InsteddisplayedColumns
应该是您的项目名称的动态列表。
所以,基本上你必须转置你的数据表,使列变成行,行变成列。
检查我根据 Stackblitz 中的 Angular Material Basic Table 示例制作的示例:https ://stackblitz.com/edit/angular-g7reoi?file=src%2Fapp%2Ftable-basic-example.ts
不是一件容易的事!它显示了如何转置列标题,但您仍然必须找到一种方法来转置数据。在示例中,我刚刚创建了一个假的转置数据结构。