Angular Material table Datasource wont display array

Question

Im having an issue displaying data in a table using datasource i will add my code below please let me know if u see what im doing wrong here I cant see to figure it out

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

please let me know if any more code snippets is required ive reread the docs many times on this and just cant figure it out any help would be appreciated

Im able to get it to display 1 row of data using this code here but for some reason it will only display the first object in the datasource nothing else i have a feeling that has something todo with the forEach loop

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

Try this article dev.to/jwp/angular-material-table-in-20-minutes-15f4 — JWP

Samuel Kampf Samuel Kampf · Accepted Answer · 2020-11-05T01:31:05

Well after rereading docs i have found i was being totally ineffecient and rewrote the code this does everything i was trying to achieve below.

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

Angular Material table Datasource wont display array

1 Answers