尝试实现角材料选择表时出现问题

Question

我正在尝试在我的角度材料表中实现选择列，我按照页面上指定的所有步骤进行操作：https://material.angular.io/components/table/examples 但它对我不起作用（它不显示该列）并且可悲问题是它没有向我显示任何错误。我留下一些代码：

表：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
        </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
        </mat-checkbox>
    </td>
</ng-container>

<ng-container matColumnDef="rec_fechaAlta">
    <th mat-header-cell *matHeaderCellDef>Fecha Alta</th>
    <td mat-cell *matCellDef="let element">{{ element.rec_fechaAlta }}</td>
</ng-container>

<ng-container matColumnDef="tipRec_nombre">
    <th mat-header-cell *matHeaderCellDef>Reclamo</th>
    <td mat-cell *matCellDef="let element">{{ element.tipRec_nombre }}</td>
</ng-container>

<ng-container matColumnDef="rec_direccion">
    <th mat-header-cell *matHeaderCellDef>Dirección</th>
    <td mat-cell *matCellDef="let element">{{ element.rec_direccion }}</td>
</ng-container>

<ng-container matColumnDef="bar_nombre">
    <th mat-header-cell *matHeaderCellDef>Barrio</th>
    <td mat-cell *matCellDef="let element">{{ element.bar_nombre }}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
</tr>

ts 文件：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';

export interface ReclamoPendiente {
  rec_fechaAlta: string;
  tipRec_nombre: string;
  rec_direccion: string;
  bar_nombre: string;
}

let arrData: ReclamoPendiente[] = [];

@Component({
  selector: 'app-crear-orden-servicio',
  templateUrl: './crear-orden-servicio.component.html',
  styleUrls: ['./crear-orden-servicio.component.css']
})
export class CrearOrdenServicioComponent implements OnInit {

  displayedColumns: string[] = ['select', 'rec_fechaAlta', 'tipRec_nombre', 
'rec_direccion', 'bar_nombre'];
  dataSource = new MatTableDataSource<ReclamoPendiente>(arrData);
  selection = new SelectionModel<ReclamoPendiente>(true, []);

  ngOnInit() {
      this.objIDArServ = {
        usu_IDAreaServicio: this.user.usu_IDAreaServicio
      };

this.ordServService.selectReclamosPendientes(this.objIDArServ).subscribe(data => 
 {
    arrData = data;
    console.log(data);
 });
}

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle() {
    this.isAllSelected()
      ? this.selection.clear()
      : this.dataSource.data.forEach(row => this.selection.select(row));
  }

  checkboxLabel(row?: any): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${
      this.selection.isSelected(row) ? 'deselect' : 'select'
    } row ${row.position + 1}`;
  }
}

控制台结果：

屏幕：

有什么想法吗？

Answer 1

这是因为您甚至在从服务加载数据之前就尝试将数据分配给表。

试试类似的东西

 dataSource :any
ngOnInit(){

this.ordServService.selectReclamosPendientes(this.objIDArServ).subscribe(data => 
 {
    arrData = data;
    console.log(data);
this.dataSource=new MatTableDataSource(arrData);
 });
}

希望对你有帮助

Answer 2

您的主要问题是您没有将数据正确传递给您的dataSource。

您从哪里获取数据 - 试试这个：

arrData = data;
console.log(data);
this.dataSource.data = data;

或

arrData = data;
console.log(data);
this.dataSource = new MatTableDataSource<ReclamoPendiente>(data);