angular material table data will load after click sort button

Question

hello i used angular material for my project i'm trying to create a table with sort and pagination this is my component code for related table .. the table data will show after i write something in filter or click pagination how can in fix this issue? thankyou

@Component({
  selector: 'app-alluser',
  templateUrl: './alluser.component.html',
  styleUrls: ['./alluser.component.scss']
})
export class AlluserComponent implements OnInit {

  constructor(private _user: UserService) {
  }

  public users;

  public tableData = [];

  displayedColumns = ['id', 'username', 'first_name', 'last_name', 'email', 'is_staff', 'is_superuser', 'is_active', 'groups'];
  dataSource = new MatTableDataSource(this.tableData);

  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    this._user.getUsersInfo().subscribe(data => {
      this.users = data;

      for (let user of this.users) {
        this.tableData.push(
          {
            id: user.id,
            username: user.username,
            first_name: user.first_name,
            last_name: user.last_name,
            email: user.email,
            is_staff: user.is_staff,
            is_superuser: user.is_superuser,
            is_active: user.is_active,
            groups: user.groups[0]
          }
        );
      }
    });


  }


  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

  }


  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

}

David · Accepted Answer · 2018-03-23 08:29:22Z

Initialise your MatTableDataSource in your ngOnInit

public tableData = [];

  displayedColumns = ['id', 'username', 'first_name', 'last_name', 'email', 'is_staff', 'is_superuser', 'is_active', 'groups'];
  dataSource  : MatTableDataSource<any>; //<== Declaration only

  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    this._user.getUsersInfo().subscribe(data => {
      this.users = data;

      for (let user of this.users) {
        this.tableData.push(
          {
            id: user.id,
            username: user.username,
            first_name: user.first_name,
            last_name: user.last_name,
            email: user.email,
            is_staff: user.is_staff,
            is_superuser: user.is_superuser,
            is_active: user.is_active,
            groups: user.groups[0]
          }
        );
      }
      this.dataSource = new MatTableDataSource(this.tableData); <== assignment
    });


  }

Otherwise, you can explicitely call angular's change detection

 constructor(private _user: UserService, private ref: ChangeDetectorRef) {
 }

 //And after modifying table's data:
 //this.ref.detectChanges();

Collectives™ on Stack Overflow

angular material table data will load after click sort button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related