时间戳

首页 > 解决方案 > Angular 材料 5.2.4 - 无表格数据

angular - Angular 材料 5.2.4 - 无表格数据

问题描述

我有角材料表的问题。我不知道为什么它不起作用。插件工作，分页也是，我可以从 http 登录到控制台数据，但插件不显示行。表的数据是对象数组，它看起来与角度示例中的相同

.html

    <mat-table #table [dataSource]="dataSource" class="" matSort matSortActive="name" matSortDisableClear matSortDirection="asc">

        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef>Nazwa</mat-header-cell>
            <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="description">
            <mat-header-cell *matHeaderCellDef>Opis</mat-header-cell>
            <mat-cell *matCellDef="let row">{{ row.description }}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

    <mat-paginator [length]="resultsLength" [pageSize]="30">
    </mat-paginator>
</div>

.ts 

  @Component({
        selector: 'app-servicepointstablecomponent',
        templateUrl: './servicepointstable.component.html'
    })

@Injectable()
export class ServicepointstableComponent implements OnInit{

dataSource = new MatTableDataSource();
displayedColumns = ['name', 'description'];

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@Output() forDisplayRow = new EventEmitter<ServicePoint>();

resultsLength = 0;
isLoadingResults = true;
isRateLimitReached = false;

public selectedRow: ServicePoint;

constructor(private tableService: TableService) {
}

ngOnInit() {

    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 1);

    merge(this.sort.sortChange, this.paginator.page)
        .pipe(
        startWith({}),
        switchMap(() => {
            this.isLoadingResults = true;
            return this.tableService!.getTableDataNew2<ServicePoint>(
                this.sort.active, this.sort.direction, this.paginator.pageIndex);
        }),
        map(data => {

            this.isLoadingResults = false;
            this.isRateLimitReached = false;
            //this.resultsLength = data.total_count;
            this.resultsLength = 100;
            console.log(data);
            return data.items;
        }),
        catchError(() => {
            this.isLoadingResults = false;

            this.isRateLimitReached = true;
            return observableOf([]);
        })
        ).subscribe(data => this.dataSource.data = data);
}

applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); 
    filterValue = filterValue.toLowerCase(); 
}

onSelect(row: ServicePoint): void {
    this.tableService.getRowNew<ServicePoint>(row.idServicePoint).subscribe(rr => {
    this.selectedRow = rr; console.log(rr);
        this.forDisplayRow.emit(rr);});
}

onDelete(row: ServicePoint): void {
    console.log(`delete row ${row.description} ${row.name}`);
}

}

标签： angularangular-material

解决方案

dataSource = new MatTableDataSource();

哥们那里漏了点东西！

那里

.subscribe(data => this.dataSource.data = data)

这不是您创建新数据源的方式。
使用第一种语法：

.subscribe(data => this.dataSource = new MatTableDataSource(data))

推荐阅读