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.

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?

I have this:

template:

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

and ts script:


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();


    }); 
  }

}

So what I have to change?

I try it like this:

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

But then I get this errors:

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

回答1:

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

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.

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.

来源：https://stackoverflow.com/questions/59266723/how-to-get-labels-as-name-propery-from-the-backend-with-angular-material

标签

javascript

angular

angular-material