[英]Angular Material table Datasource wont display array
我在使用数据源在表中显示数据时遇到问题,我将在下面添加我的代码,如果你看到我在这里做错了什么,我无法弄清楚
export interface userData {
email: string;
plans: [];
}
export interface PlanData {
amount: number;
channel: string;
expiration: Date;
active: boolean;
};
@Component({
selector: 'app-plan-manager',
templateUrl: './plan-manager.component.html',
styleUrls: ['./plan-manager.component.css']
})
export class PlanManagerComponent implements OnInit {
displayedColumns: string[] = ['active', 'amount', 'channel', 'power'];
array = []
dataSource: PlanData[] = [];
constructor(public router: Router, private firestore: AngularFirestore, private auth: AngularFireAuth, private snackBar: MatSnackBar) { }
ngOnInit(): void {
this.auth.user.subscribe(user => {
this.firestore.collection('users').doc<userData>(user.email).valueChanges().subscribe(userDoc => {
if(userDoc.plans.length === 0){
this.snackBar.open('You have no active plans please purchase a plan here and it will be listed on the dashboard','',{duration: 5000})
this.router.navigate(['plans'])
return;
}
userDoc.plans.forEach((plan, i) => {
this.firestore.collection('plans').doc<PlanData>(plan).valueChanges().subscribe(data => {
//data looks like this {amount: 45, active: true, channel: "test"}
this.dataSource.push(data)
})
})
})
})
}
请让我知道是否需要更多的代码片段我已经多次重读文档,但无法弄清楚任何帮助将不胜感激
我可以在这里使用此代码让它显示 1 行数据,但由于某种原因,它只会显示数据源中的第一个对象,没有别的我觉得与 forEach 循环有关
export interface userData {
email: string;
plans: [];
}
export interface PlanData {
amount: number;
channel: string;
active: boolean;
};
@Component({
selector: 'app-plan-manager',
templateUrl: './plan-manager.component.html',
styleUrls: ['./plan-manager.component.css']
})
export class PlanManagerComponent implements OnInit {
displayedColumns: string[] = ['active', 'amount', 'channel'];
array = []
dataSource: PlanData[] = [];
constructor(private changeDetectorRefs: ChangeDetectorRef, public router: Router, private firestore: AngularFirestore, private auth: AngularFireAuth, private snackBar: MatSnackBar) { }
ngOnInit(): void {
this.auth.user.subscribe(user => {
this.firestore.collection('users').doc<userData>(user.email).valueChanges().subscribe(userDoc => {
if(userDoc.plans.length === 0){
this.snackBar.open('You have no active plans please purchase a plan here and it will be listed on the dashboard','',{duration: 5000})
this.router.navigate(['plans'])
return;
}
userDoc.plans.forEach((plan, i) => {
this.firestore.collection('plans').doc<PlanData>(plan).valueChanges().subscribe(data => {
this.array.push(data)
this.dataSource = this.array
})
})
})
})
}```
在重新阅读文档后,我发现我完全没有效率,并重写了代码,这完成了我在下面试图实现的所有目标。
export class PlanManagerComponent implements OnInit {
displayedColumns: string[] = ['active', 'amount', 'channel'];
dataSource: MatTableDataSource<any>;
constructor(private changeDetectorRefs: ChangeDetectorRef, public router: Router, private firestore: AngularFirestore, private auth: AngularFireAuth, private snackBar: MatSnackBar) { }
ngOnInit(): void {
this.dataSource = new MatTableDataSource();
this.auth.user.subscribe(user => {
console.log(user.email)
this.firestore.collection('users').doc(user.email).collection('/plans').valueChanges().subscribe(userDoc => {
this.dataSource.data = userDoc;
});
});
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.