Javascript 模板中的角度Firebase集成

我对Angular和typescript是一个全新的人，我仍在努力，但现在我做不到

我为Angular（VEX）购买了一个模板，我想将firebase中的数据集成到模板中已经存在的数据表中

getData() {
const users = [];

firebase.database().ref('/users').once('value').then((snapshot) => {
     users.push(snapshot.val()) ;
     const users2 = users[0];
     const mapped = Object.keys(users2).map(key => (users2[key]));
     console.log(mapped.map(customer => new Customer(customer)));
     // console.log(aioTableData.map(customer => new Customer(customer)));
     return of(mapped.map(customer => new Customer(customer)));
         });

// return of(aioTableData.map(customer => new Customer(customer)));

在模板中，这个表由静态数据提供，我想用调用firebase来替换它

我真的迷路了，我想知道如何才能到达那里

这是管理用户组件。ts

从'@angular/core'导入{AfterViewInit，Component，Input，OnInit，ViewChild}；
从“rxjs”导入{可观察的，of的，ReplaySubject}；
从“rxjs/operators”导入{filter}；
从“./interfaces/Customer.model”导入{Customer}；
从“@angular/material/table”导入{MatTableDataSource}；
从'@angular/material/paginator'导入{MatPaginator}；
从'@angular/material/sort'导入{MatSort}；
从“@angular/material/dialog”导入{MatDialog}；
从“../../../@vex/interfaces/table column.interface”导入{TableColumn}；
从“../../static data/aio table data”导入{aioTableData，aioTableLabels}；
从“./customer-create-update/customer-create-update.component”导入{customer-createupdatecomponent}；
从“@iconify/icons-ic/twoone-edit”导入icEdit；
从“@iconify/icons-ic/twoone-delete”导入icDelete；
从“@iconify/icons ic/twotone搜索”导入icSearch；
从“@iconify/icons ic/twotone add”导入icAdd；
从“@iconify/icons ic/twotone筛选器列表”导入icFilterList；
从'@angular/cdk/collections'导入{SelectionModel}；
从“@iconify/icons-ic/twoone-more-horiz”导入icMoreHoriz；
从“@iconify/icons ic/twotone文件夹”导入icFolder；
从“../../../@vex/animations/fade-in-up.animation”导入{fadeInUp400ms}；
从“@angular/material/FORM FIELD”导入{MAT_FORM_FIELD_DEFAULT_OPTIONS，MatFormFieldDefaultOptions}”；
从“../../../@vex/animations/stagger.animation”导入{stagger40ms}；
从'@angular/forms'导入{FormControl}；
从“@ngneat/until destroy”导入{UntilDestroy，untilDestroyed}；
从“@angular/material/select”导入{MatSelectChange}；
从“@iconify/icons ic/twotone phone”导入icPhone；
从“@iconify/icons-ic/twoone-mail”导入icMail；
从“@iconify/icons-ic/twotone-map”导入icMap；
从“firebase”导入firebase；
从“../../services/user manage.service”导入{UserManageService}；
@不合时宜
@组成部分({
选择器：“vex管理用户”，
templateUrl:'./manage users.component.html'，
样式URL:['./管理用户.component.scss']，
动画：[
法迪努普400毫秒，
交错40毫秒
],
供应商：[
{
提供：MAT\u FORM\u FIELD\u DEFAULT\u选项，
使用价值：{
外观：“标准”
}作为MatFormFieldDefaultOptions
}
]
})
导出类ManageUsersComponent实现OnInit，AfterViewInit{
layoutCtrl=新表单控件（“已装箱”）；
/**
*使用返回可观察内容的HTTP模拟服务
*您可能希望删除此项，并使用HTTP在服务中执行所有请求
*/
主题$：ReplaySubject=新ReplaySubject（1）；
data$：Observable=this.subject$.asObservable（）；
客户：客户[]；
@输入（）
列：TableColumn[]=[
{label:'Checkbox'，property:'Checkbox'，type:'Checkbox'，visible:true}，
{label:'ShipTo'，property:'extId'，type:'text'，visible:true}，
{label:'uid'，property:'uid'，type:'text'，visible:true}，
{label:'Compagny'，property:'Compagny'，type:'text'，visible:true}，
{label:'Name'，property:'Name'，type:'text'，visible:true，cssClasses:['font-medium']}，
{label:'firstName'，property:'firstName'，type:'text'，visible:false}，
{标签：'lastName'，属性：'lastName'，类型：'text'，可见：false}，
{label:'Email'，property:'Email'，type:'text'，visible:true}，
{标签：'Phone'，属性：'Phone'，类型：'text'，可见：true}，
{label:'Role'，property:'Role'，type:'text'，visible:true}，
{label:'Actions'，property:'Actions'，type:'button'，visible:true}
];
页面大小=10；
页面大小选项：数字[]=[5,10,20,50]；
数据源：MatTableDataSource |空；
selection=新SelectionModel（true，[]）；
searchCtrl=新表单控件（）；
标签=可旋转标签；
icPhone=icPhone；
icMail=icMail；
icMap=icMap；
icEdit=icEdit；
icSearch=icSearch；
icDelete=icDelete；
icAdd=icAdd；
icFilterList=icFilterList；
icMoreHoriz=icMoreHoriz；
icFolder=icFolder；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
@ViewChild（MatSort，{static:true}）sort:MatSort；
构造函数（专用对话框：MatDialog，
私有用户管理服务（UserManageService:UserManageService）{
}
获取visibleColumns（）{
返回this.columns.filter（column=>column.visible）.map（column=>column.property）；
}
/**
*关于如何获取数据并将其传递到表的示例-通常您需要一个专门的服务，并为此提供HTTP请求
*我们在这里模拟这个请求。
*/
getData（）{
返回（aioTableData.map（customer=>新客户（customer））；
}
恩戈尼尼特（）{
const users=this.usersManageService.getUsers（）；
console.log（用户）；
this.getData（）.subscribe（客户=>{
此.subject$.next（客户）；
});
console.log（aioTableData）；
this.dataSource=新MatTableDataSource（）；
此.data$.pipe(
过滤器（布尔值）
).订阅（客户=>{
这是。顾客=顾客；
this.dataSource.data=客户；
});
this.searchCtrl.valueChanges.pipe(
未经处理的（本）
).subscribe（value=>this.onFilterChange（value））；
}
ngAfterViewInit（）{
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
}
createCustomer（）{
this.dialog.open（CustomerCreateUpdateComponent）.afterClosed（）.subscribe（（客户：客户）=>{
/**
*卡斯特
getData() {
const users = [];

firebase.database().ref('/users').once('value').then((snapshot) => {
     users.push(snapshot.val()) ;
     const users2 = users[0];
     const mapped = Object.keys(users2).map(key => (users2[key]));
     console.log(mapped.map(customer => new Customer(customer)));
     // console.log(aioTableData.map(customer => new Customer(customer)));
     return of(mapped.map(customer => new Customer(customer)));
         });

// return of(aioTableData.map(customer => new Customer(customer)));

ngOnInit() {

this.getData().subscribe(customers => {
  this.subject$.next(customers);
});

this.dataSource = new MatTableDataSource();

this.data$.pipe(
  filter<Customer[]>(Boolean)
).subscribe(customers => {
  this.customers = customers;
  this.dataSource.data = customers;
});

this.searchCtrl.valueChanges.pipe(
  untilDestroyed(this)
).subscribe(value => this.onFilterChange(value));