Добавление флажка к первому столбцу динамической таблицы c mat - PullRequest
Новая
       20

Добавление флажка к первому столбцу динамической таблицы c mat

0 голосов
/ 16 марта 2020

Впервые до angular. У меня есть таблица Dynami c, которая просматривает и отображает массив данных. Первый столбец является логическим, и я хотел бы сделать его флажком. Я попытался добавить мат-флажок в строке, но он добавляет его в каждую ячейку. Мне нужно, чтобы оно появилось только в первом столбце. Я пробовал несколько разных способов, но я застрял. Я думал, возможно, просто используя CSS, но все еще не уверен, как go об этом. Любая помощь очень ценится. Вот что у меня есть: 

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  @Input() tableData;
  @Input() columnHeader;
  @Input() pageTitle;
  objectKeys = Object.keys;


  dataSource;
  dataNumber;

  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;


  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.tableData);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    this.dataNumber = this.tableData.length;
  }

 applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div>
  <label>{{pageTitle}} ({{tableData.length}})</label>
<table mat-table [dataSource]="dataSource" matSort>


  <ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
    <th class="header" mat-header-cell *matHeaderCellDef mat-sort-header> {{columnHeader[tableData]}}</th>  

    <td class="row" mat-cell *matCellDef="let element">{{element[tableData] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="objectKeys(columnHeader)"></tr>
  <tr mat-row *matRowDef="let row; columns: objectKeys(columnHeader);"></tr>
</table>

</div>
<mat-paginator [length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

1 Ответ

0 голосов
/ 17 марта 2020

Вы можете поставить условие там. Предположим, что имя вашего столбца tableData идет как select, поэтому, основываясь на имени столбца, вы можете сохранить *ngIf там следующим образом: 

<ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
    <th class="header" mat-header-cell *matHeaderCellDef mat-sort-header>
        <span *ngIf="tableData == 'select' ">
           //Your checkbox will come here
        </span>
       <span *ngIf="tableData != 'select' ">
           {{columnHeader[tableData]}}
        </span>
    </th>  

    <td class="row" mat-cell *matCellDef="let element">
        {{element[tableData] }}

        <span *ngIf="tableData == 'select' ">
           //Your checkbox will come here
        </span>
    </td>
</ng-container>
...