繁体   English   中英

角度材料表数据源不会显示数组

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM