Javascript 如何使用Angular 8+；来自firebase的数据？

我有一个带有firebase数据的材料表的角度PWA，显示了数据，分页器正在工作，但我也想对其数据进行排序，但mat sort不起作用。它显示了对数据进行排序的箭头，但单击箭头时，数据未排序

我遵循了Angular Material的文档

组件模板中的表：

        <ng-container matColumnDef="movimento">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Tipo de movimento</th>
            <td mat-cell *matCellDef="let movimento"> {{movimento.mapValue.fields.tipo_movimento.stringValue}}
            </td>
        </ng-container>

        <ng-container matColumnDef="valor">

            <th mat-header-cell *matHeaderCellDef mat-sort-header>Valor</th>
            <td mat-cell *matCellDef="let movimento">
                {{movimento.mapValue.fields.valor.doubleValue | number:'1.1-2'}}
                {{movimento.mapValue.fields.valor.integerValue}} €
            </td>
        </ng-container>

        <ng-container matColumnDef="data">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Data</th>
            <td mat-cell *matCellDef="let movimento"> {{movimento.mapValue.fields.data.timestampValue | date}}
            </td>
        </ng-container>

        <ng-container matColumnDef="desc">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Descrição</th>
            <td mat-cell *matCellDef="let movimento"> {{movimento.mapValue.fields.desc.stringValue}}</td>
        </ng-container>

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


    </table>
    <mat-paginator [pageSizeOptions]="[10, 20, 40]" showFirstLastButtons></mat-paginator>

蒂波德莫维门托酒店
{{movimento.mapValue.fields.tipo_movimento.stringValue}
英勇
{{movimento.mapValue.fields.valor.doubleValue}编号：'1.1-2'}
{{movimento.mapValue.fields.valor.integerValue}}
资料
{{movimento.mapValue.fields.data.timestampValue | date}
描述
{{movimento.mapValue.fields.desc.stringValue}}

组成部分：

@Component({
  selector: 'app-movimentar',
  templateUrl: './visualizar-movimentos.component.html',
  styleUrls: ['./visualizar-movimentos.component.css']
})
export class VisualizarMovimentosComponent implements OnInit {
  user: firebase.User;

  userData;

  displayedColumns: string[] = ['movimento', 'valor', 'data', 'desc'];

  dataSource = new MatTableDataSource<Movimentos>();


  @ViewChild(MatPaginator, { static: false })
  set paginator(value: MatPaginator) {
    this.dataSource.paginator = value;
  }

  @ViewChild(MatSort, { static: false }) sort: MatSort;


  constructor(private auth: AuthService,
    private router: Router,
    private afs: AngularFirestore) { }

  ngOnInit() {
    this.auth.getUserState()
      .subscribe(user => {
        this.user = user;

        this.getUserData();
      });

  }

  /* loadLessonsPage() {
    this.dataSource._orderData;
    debugger
  } */

  getUserData(): void {
    this.auth.getUserData(this.user.uid)
      .subscribe(user => {
        this.userData = user;

        this.dataSource = new MatTableDataSource(this.userData._document.proto.fields.movimentos.arrayValue.values);

        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;

      });


  }

  login() {
    this.router.navigate(['login']);
  }

  logout() {
    this.auth.logout();
    this.router.navigate(['inicio']);
  }

  register() {
    this.router.navigate(['/register']);
  }

  trackByUid(index, item) {
    return item.uid;
  }



}```

Thanks for the help in advance.

@组件({
选择器：“app movimentar”，
templateUrl:'./visualizar movimentos.component.html'，
styleUrls:['./visualizar movimentos.component.css']
})
导出类VisualizarMovimentosComponent实现OnInit{
用户：firebase.user；
用户数据；
显示的列：字符串[]=['movimento'，'valor'，'data'，'desc']；
dataSource=新MatTableDataSource（）；
@ViewChild（MatPaginator，{static:false}）
设置分页器（值：MatPaginator）{
this.dataSource.paginator=值；
}
@ViewChild（MatSort，{static:false}）sort:MatSort；
构造函数（私有auth:AuthService，
专用路由器：路由器，
私人afs:AngularFirestore{}
恩戈尼尼特（）{
this.auth.getUserState（）
.subscribe（用户=>{
this.user=用户；
这是getUserData（）；
});
}
/*loadLessonsPage（）{
此.dataSource.\u orderData；
调试器
} */
getUserData（）：void{
this.auth.getUserData（this.user.uid）
.subscribe（用户=>{
this.userData=user；
this.dataSource=新MatTableDataSource（this.userData.\u document.proto.fields.movimentos.arrayValue.values）；
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
});
}
登录（）{
this.router.navigate（['login']）；
}
注销（）{
this.auth.logout（）；
this.router.navigate（['inicio']）；
}
寄存器（）{
this.router.navigate（['/register']）；
}
trackByUid（索引，项）{
返回item.uid；
}
}```
提前谢谢你的帮助。

您需要像这样在表中以及要对数据进行排序的列上指定mat sort

<table matSort (matSortChange)="sortData($event)">
</table>

在加载数据时，您已经完成了这一部分

getUserData(): void {
this.auth.getUserData(this.user.uid)
  .subscribe(user => {
    this.userData = user;

    this.dataSource = new MatTableDataSource(this.userData._document.proto.fields.movimentos.arrayValue.values);

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

  });
}

---

现在应该可以了

问题在于来自firebase的数据，它与mat排序不兼容。要解决此问题，您需要一个类似以下的地图：

这是地图

    return data.reduce((acc, value) => {
      return [
        ...acc,
        Object.entries(value.mapValue.fields).reduce((accValue, [key, value]) => {
          return {
            ...accValue,
            [key]: Object.values(value)[0]
          }
        }, {})
      ]
    }, [])
  }

---

它不工作，在sortData（）函数中需要什么？此外，第一个this.sort未被识别，您不需要实现它。这只是供参考。只需关注表标记中的matSort，它仍然不起作用。请在getUserData（）中尝试此操作。setTimeout（（）=>this.dataSource.sort=this.sort）；它给了我一个错误：类型“void”上不存在属性“setTimeout”。ts（2339）

getUserData(): void {
this.auth.getUserData(this.user.uid)
  .subscribe(user => {
    this.userData = user;

    this.dataSource = new MatTableDataSource(this.userData._document.proto.fields.movimentos.arrayValue.values);

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

  });
}

    return data.reduce((acc, value) => {
      return [
        ...acc,
        Object.entries(value.mapValue.fields).reduce((accValue, [key, value]) => {
          return {
            ...accValue,
            [key]: Object.values(value)[0]
          }
        }, {})
      ]
    }, [])
  }