角度材料表數據源不會顯示數組

Question

我在使用數據源在表中顯示數據時遇到問題，我將在下面添加我的代碼，如果你看到我在這里做錯了什么，我無法弄清楚

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

Answer 1

在重新閱讀文檔后，我發現我完全沒有效率，並重寫了代碼，這完成了我在下面試圖實現的所有目標。

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