如何使用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脚本:

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'];

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示例制作的示例:

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屋！