mardi 10 décembre 2019

Showing checkboxes with api call names

I am using angular material. And I have a table with a colomn projects.so under the title projects there have to been showing some checkboxes with tthe names of the projects from the backend.

So this is the template:


  <ng-container matColumnDef="projects">
          <th mat-header-cell *matHeaderCellDef (mouseover)="show=true" (mouseout)="show=false" mat-sort-header i18n>
            <mat-checkbox

              (click)="$event.stopPropagation()"
              (change)="selection[0] = $event.isChecked"
              [checked]="selection[0]"
            >  <td mat-cell *matCellDef="let element">  </td>
          </mat-checkbox>
            Projects
          </th>
             <td mat-cell *matCellDef="let row"></td>
        </ng-container>

And this is the js code.


public readonly displayedColumns = ['selectParticipant', 'fullName', 'dateOfBirth', 'projects', 'view'];
  public searchExpanded = false;
  public participantIds: string[] = [];
  public projectIds : string[] = [];
  organisationId: number = 1;

  selectedValue: string;
  returnProjectCodes: ProjectApi[];
  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;


  constructor(
    private dialog: MatDialog,
    route: ActivatedRoute,
    private extendedSearchFilterService: ExtendedSearchService,
    private selectedParticipantsService: SelectedParticipantsService,
    private ProjectSearchService: ProjectService,

    private dialogModelService: DialogModalService
  ) {
    const allParticipants: any[] = route.snapshot.data['participants'];
    this.extendedSearchFilterService.updateDataSource(allParticipants);
  }

  ngOnInit() {
    this.fetchDataSource();

    this.ProjectSearchService.getByOrganisation(this.organisationId).subscribe(result => {
    console.log( this.returnProjectCodes = result);
    });
  }


So I get the projects with this call:

 this.ProjectSearchService.getByOrganisation(this.organisationId).subscribe(result => {
    console.log( this.returnProjectCodes = result);
    });
0: {projectId: "4f78e0c0-8cd3-4e37-bf62-105f622c483f", name: "Project_Test", description: "nice project"}
1: {projectId: "998232d8-d218-4e39-afa1-c8daf826f1a6", name: "Vital10 Premium", d

But so my question is: How to show the name of it with the checkboxes?

Thank you




Aucun commentaire:

Enregistrer un commentaire