How to use the @angular/material/table.MatTableDataSource function in @angular/material

private initializeDataSource(): void {
		this.dataSource = new MatTableDataSource(this.data);

		// if there are observers subscribed to the StarkPagination event, it means that the developer will take care of the pagination
		// so we just re-emit the event from the Stark Pagination component (online mode)
		if (this.paginationChanged.observers.length > 0) {
			this.starkPaginator.paginated.subscribe((paginateEvent: StarkPaginateEvent) => {
				this.paginationChanged.emit(paginateEvent);
			});
		} else {
			// if there are no observers, then the data will be paginated internally in the MatTable via the Stark paginator event (offline mode)
			this.dataSource.paginator = this.starkPaginator;
		}

		this.starkPaginator.emitMatPaginationEvent();

		this.dataSource.filterPredicate = (rowData: object, globalFilter: string) => {
			const matchFilter: boolean[] = [];

import { SerialPortHistoryPreviewGlobal } from "../models/serialporthistory.global";

@Component({
  selector: 'serialporthistorygcode',
  templateUrl: './serialporthistory-gcode.component.html',
  styleUrls: ['./serialporthistory-gcode.component.css']
})
export class SerialPortHistoryGCodeComponent implements OnChanges, OnInit, OnDestroy {

  forserialportid: number = -1;

  @Input()
  autoreloadonempty: boolean = false;

  serialcommands: SerialCommand[] = [];
  serialcommandsDataSource = new MatTableDataSource(this.serialcommands);

  displayedColumns: string[] = [/* 'SeqId', */ 'sentTime', 'commandText', 'replyType', 'resultText', 'replyReceivedTime'];

  @ViewChild(MatPaginator)
  paginator: MatPaginator;

  private hubConnection: HubConnection;
  private _initDone: boolean = false;

  constructor(
    private serivalServerService: SerialServerService,
    public serialServer: SerialServerConnection,
    public previewGlobal: SerialPortHistoryPreviewGlobal
  ) {
  }

public ngOnInit(): void {
        super.setTitle('Categories');

        this.dataSource = new MatTableDataSource();
        this.repo.getViewModelListObservable().subscribe(viewCategories => {
            if (viewCategories && this.dataSource) {
                this.dataSource.data = viewCategories;
            }
        });
    }

for (const order of orders) {
        const products: StrippedProduct[] = []
        for (const product of order.products) {
          products.push({
            id: product.id,
            name: product.name,
            price: product.price,
            quantity: product.quantity,
            total: product.total
          })
        }
        this.orders.push({
          orderId: order.orderId,
          totalPrice: order.totalPrice,
          bonus: order.bonus,
          products: new MatTableDataSource(products),
          delivered: order.delivered
        })
      }
    },(err) => console.log(err))
  }

ngOnInit() {
        this.dataSource = new MatTableDataSource([{
            id: '1',
            name: '管理员',
            status: true,
            description: '描述'
        }, {
            id: '2',
            name: '普通用户',
            status: false,
            description: '描述'
        }]);
        this.displayedColumns = ['select', 'id', 'name', 'status', 'description', 'actions'];
        this.selection = new SelectionModel(true, []);

        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    }

ngOnChanges(changes: SimpleChanges): void {
    if (changes['logArray']) {
      this.dataSource = new MatTableDataSource(this.logArray || []);
      this.setDataSourceAttributes();
    }
  }

.subscribe((data: {resp: DomainRpc[]}) => {
          this.dataSource = new MatTableDataSource(data.resp);
          this.dataSource.paginator = this.paginator.paginator;
        },
        error => this.snackBar.open(

{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Table with selection
 */
@Component({
  selector: 'table-selection-example',
  styleUrls: ['table-selection-example.css'],
  templateUrl: 'table-selection-example.html',
})
export class TableSelectionExample {
  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  selection = new SelectionModel(true, []);

  /** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

this.dataStore.upgradeablePackages.subscribe((upgradeable) => {
        this.upgradeablePackages = upgradeable?.packages;

        this.upgradeablePackages?.forEach((upgradeablePackage: MagicMirrorPackage) => {
          pkgs.forEach((installedPkg: MagicMirrorPackage, index: number) => {
            if (this.mmpmUtility.isSamePackage(upgradeablePackage, installedPkg)) {
              this.isUpgradeable[index] = true;
            }
          });
        });
      });

      this.packages = pkgs;
      this.selection = new SelectionModel(true, []);
      this.dataSource = new MatTableDataSource(this.packages);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

      this.tableUtility = new MagicMirrorTableUtility(this.selection, this.dataSource, this.sort, this.dialog);
    });
  }

async refresh(): Promise {

    if (this._initDone) {
      this.serialcommands = await this.serivalServerService.getPending(this.forserialportid);

      this.serialcommandsDataSource = new MatTableDataSource(this.serialcommands);
      this.serialcommandsDataSource.paginator = this.paginator;
    }
  }