Блог

У меня возникла проблема с отображением данных в таблице с использованием источника данных, я добавлю свой код ниже, пожалуйста, дайте мне знать, если вы увидите, что я здесь делаю не так, я не могу понять, как это понять

 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;
    });
  });
};
};