Question

我编写了一个Angular数据表，效果很好，但是在视图中没有显示信息：

然后，我定义了一个函数，用于在单击一行时在控制台上显示信息。结果如下：

好吧，您注意到DataSource可能工作得很好，但查看文件可以呈现信息。

这是视图代码：

<div class="course">

<mat-icon>search</mat-icon>

<mat-form-field>

    <input matInput placeholder="Search lessons" #input>

</mat-form-field>

<div class="spinner-container" *ngIf="ListadoData.Cargando | async">

    <mat-spinner></mat-spinner>

</div>

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="ListadoData"
           matSort matSortActive="seqNo" matSortDirection="asc" matSortDisableClear>

    <ng-container matColumnDef="seqNo">

        <mat-header-cell *matHeaderCellDef mat-sort-header>#</mat-header-cell>

        <mat-cell *matCellDef="let user">{{user.seqNo}}</mat-cell>

    </ng-container>

    <ng-container matColumnDef="description">

        <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>

        <mat-cell class="description-cell"
                  *matCellDef="let lesson">{{lesson.description}}</mat-cell>

    </ng-container>

    <ng-container matColumnDef="duration">

        <mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>

        <mat-cell class="duration-cell"
                  *matCellDef="let lesson">{{lesson.duration}}</mat-cell>

    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

    <mat-row *matRowDef="let row; columns: displayedColumns" (click)="FilaClick(row)"></mat-row>

</mat-table>


<mat-paginator [length]="course?.lessonsCount" [pageSize]="10"
               [pageSizeOptions]="[3, 5, 10]"></mat-paginator>

以下是组件：

          import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
      import {ListadoDataSource} from './listado.data.service';
      import {ListadoService} from './listado.service';
      import {ActivatedRoute} from "@angular/router";
      import {MatPaginator, MatSort, MatTableDataSource} from "@angular/material";
      import {Course} from './course.models'
      import {debounceTime, distinctUntilChanged, startWith, tap, delay} from 'rxjs/operators';
      import {map} from 'rxjs/operators'
      import {merge} from "rxjs/operators";
      import {fromEvent} from 'rxjs';

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

        course:Course;
        ListadoData: ListadoDataSource;
        displayedColumns: ['seqNo', 'description', 'duration'];

        @ViewChild(MatPaginator) paginator: MatPaginator;
        @ViewChild(MatSort) sort: MatSort;
        @ViewChild('input') input: ElementRef;

        constructor(private ListadoService: ListadoService, private route: ActivatedRoute) { }

        ngOnInit() {
        /*  this.course = this.route.snapshot.data["course"];*/
          this.ListadoData = new ListadoDataSource(this.ListadoService);
          this.ListadoData.CargarLecciones(1, '', 'asc', 0, 10);
        }

        ngAfterViewInit() {

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

            fromEvent(this.input.nativeElement,'keyup')
                .pipe(
                    debounceTime(150),
                    distinctUntilChanged(),
                    tap(() => {
                        this.paginator.pageIndex = 0;

                        this.CargarLeccionesPagina();
                    })
                )
                .subscribe();

            this.paginator.page
            .pipe(
                tap(() => this.CargarLeccionesPagina())
            )
            .subscribe();

            this.sort.sortChange
            .pipe(
                tap(() => this.CargarLeccionesPagina())
            )
            .subscribe();
        }

        CargarLeccionesPagina(){
          this.ListadoData.CargarLecciones(
            1,
            this.input.nativeElement.value,
            this.sort.direction,
            this.paginator.pageIndex,
            this.paginator.pageSize
          );
        }

        FilaClick(row){
          console.log(row)
        }
      }

和数据源：

        import {CollectionViewer, DataSource} from "@angular/cdk/collections";
    import {Lesson} from './listado.models';
    import {BehaviorSubject, Observable} from "rxjs";
    import {ListadoService} from './listado.service';
    import {catchError, finalize} from "rxjs/operators";
    import {of} from "rxjs";

    export class ListadoDataSource implements DataSource<Lesson>{

      private ComportamientoLeccion = new BehaviorSubject<Lesson[]>([]);
      private CargandoLeccion = new BehaviorSubject<boolean>(false);

      public Cargando = this.CargandoLeccion.asObservable();

      constructor(private ListadoService: ListadoService){ }

      connect (collectionViewer: CollectionViewer):Observable<Lesson[]>{
        return this.ComportamientoLeccion.asObservable();
      }

      disconnect(collectionViewer: CollectionViewer): void{
        this.ComportamientoLeccion.complete();
        this.CargandoLeccion.complete()
      }

      CargarLecciones(
        courseId:number,
        filter= '',
        sortDirection='asc',
        pageIndex=0,
        pageSize=10
      ){
        this.CargandoLeccion.next(true);

        this.ListadoService.ObtenerLecciones(courseId, filter, sortDirection, pageIndex, pageSize)
          .pipe(catchError(()=>of([])),
          finalize(()=>this.CargandoLeccion.next(false))
        )
        .subscribe(lecciones => this.ComportamientoLeccion.next(lecciones));
      }

    }

非常感谢您的帮助。

非常感谢您！

Answer 1

尝试使用行代替用户，课程等。至少一次，我们不得不使用行，但是我在文档中看到它们有时使用“元素”。所有行都必须相同。

*matCellDef="let row"> {{row.description}

Answer 2

好吧，发现它搜索的每一行

我写过：

  displayedColumns: ['seqNo', 'description', 'duration'];

有：

displayedColumns= ['seqNo', 'description', 'duration'];

Angular v6 mat-table在视图中不显示信息，但在控制台中显示

2 个答案: