mat-table，mat-sort无法正常工作-Java 学习之路

我尝试在mat-table中实现mat-sort，在我的项目中 . 启动我的项目后，我看到“排序”图标，可以点击它，但我的结果中没有任何排序，总是相同的视图 .

组件文件：

@Component({
  selector: 'app-test-component',
  templateUrl: './testComponent.component.html',
  styleUrls: ['./testComponent.component.css'],
  providers: [TestService],
})

export class TestComponent implements OnInit, OnDestroy, AfterViewInit {

  displayedColumns = ['Column1'];

  dataSource = new MatTableDataSource<UserModel>();
  private exDisplayNames: Subscription;


  @ViewChild(MatSort) sort: MatSort;

  constructor(private testService: TestService) {   }

  ngOnInit() {
    this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) => {
      this.dataSource.data = userNameData;
    });
    this.testService.fetchUserName();
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  ngOnDestroy() {

    if (this.exDisplayNames) {
        this.exDisplayNames.unsubscribe();
    }
  }

 }

服务文件：

@Injectable()
export class TestService {


    userNamesChanged = new Subject<UserModel[]>();
    private availableUserName: UserModel[] = [];


    private fbSubs: Subscription[] = [];

    constructor(private db: AngularFirestore) { }


    fetchUserName() {
        this.fbSubs.push(this.db.collection('names/')
            .snapshotChanges()
            .map(docArray => {
                return docArray.map(doc => {
                    return {
                        displayUserName: doc.payload.doc.data().nick,
                    };
                });
            })
            .subscribe((userData: UserModel[]) => {
                this.availableUserName = userData;
                this.userNamesChanged.next([...this.availableUserName]);
            }, error => {
                console.log(error);
            }));
    }

}

html文件：

<section fxLayoutAlign="center">
  <mat-card>
    <mat-card-content>
      <mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="Column1">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Nick</mat-header-cell>
          <mat-cell fxLayout="row" fxLayoutAlign="center center" *matCellDef="let element">{{ element.displayUserName}}</mat-cell>
        </ng-container>

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

还导入了所有必要的材料模块： MatSortModule, MatTabsModule .

我的步骤是：1 . 在组件中添加： @ViewChild(MatSort) sort: MatSort . 2.实现AfterViewInit . 3.补充：

ngAfterViewInit() {
   this.dataSource.sort = this.sort;
 }

在html文件中添加：matSort in <mat-table> .
为 <mat-cell-header> 添加了mat-sort-header .

就像我写的：我看到列上的排序图标，但点击后 - 没有任何变化，没有排序 .

2 回答

3

我不确定你的 UserModel 看起来如何，但我认为它不包含属性 Column1 ：

matColumnDef="Column1"

将该部分更改为 matColumnDef="displayUserName" 之类的内容或模型中的任何属性 .

也改变 displayedColumns = ['displayUserName'];

来自文档：

默认情况下，MatTableDataSource在假设已排序列的名称与列显示的数据属性名称匹配的情况下进行排序 . 例如，以下列定义名为position，它与行单元格中显示的属性的名称相匹配 .

回复于 2024-04-25T18:00:29+08:00
3
```
ngOnInit() {
  this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) => {
    this.dataSource = new MatTableDataSource(userNameData);
    setTimeout(() => this.dataSource.sort = this.sort);
  });
  this.testService.fetchUserName();
}
```
- 您的分拣机在视图init处绑定到您的数据源，但它不会等待您的请求 .
- 您应该创建数据源的新实例并停止摆弄属性 . 材料提供高水平的抽象，利用它 .
注：：在我的解决方案中，您可以看到超时，它用于更改检测 . 你有可能不需要它，我只是把它放在那里以确定 .
回复于 2024-04-25T18:00:29+08:00

mat-table，mat-sort无法正常工作

2 回答

相关问题