How can I console.log the selected option from angular Material form and table? ANGULAR 4

Question

I have a table that I made with Angular Material. It contains some data made as an object in the ts file. See the code below:

import {Component} from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
  selector: 'app-accounts',
  templateUrl: './accounts.component.html',
  styleUrls: ['./accounts.component.sass']
})


export class AccountsComponent {
  displayedColumns = ['Account Number', 'Account Name', 'Acctype1', 'Acctype2', 'Acctype3'];
  dataSource = new ExampleDataSource()

  acctypes = [
  {value: 'Tax', viewValue: 'Tax'},
  {value: 'Liabilities', viewValue: 'Liabilities'},
  {value: 'Enable', viewValue: 'Enable'},
  {value: 'Income Statement', viewValue: 'Income Statement'}
 ];

 onSelect(){
   console.log(DataSource)
 } 
}

export interface Element {
  AccountNumber: string;
  AccountName: string;
  Acctype1: string;
  Acctype2: string;
  Acctype3: string;
}

const data: Element[] = [
  {AccountNumber: '001' , AccountName: 'Pepsi', Acctype1: 'H', Acctype2: 'D', Acctype3: 'P'},
  { AccountNumber: '002', AccountName: 'Coke', Acctype1: 'He', Acctype2: 'G', Acctype3: 'Wm'},
  { AccountNumber: '003', AccountName: 'Fanta', Acctype1: 'Li', Acctype2: 'Dk', Acctype3: 'R'},
  { AccountNumber: '004', AccountName: 'Faxe Kondi', Acctype1: 'Be', Acctype2: 'B', Acctype3: 'K'},
  { AccountNumber: '005', AccountName: 'Dr Pepper', Acctype1: 'B', Acctype2: 'Pn', Acctype3: 'M'},
  { AccountNumber: '006', AccountName: 'Mars', Acctype1: 'C', Acctype2: 'Mw', Acctype3: 'Xnm'},
  { AccountNumber: '007', AccountName: 'Snickers', Acctype1: 'N', Acctype2: 'D', Acctype3: 'P'},
  { AccountNumber: '008', AccountName: 'Converse', Acctype1: 'O', Acctype2: 'Z', Acctype3: 'Wc'},
  { AccountNumber: '009', AccountName: 'Adidas', Acctype1: 'F', Acctype2: 'Q', Acctype3: 'O'},
  { AccountNumber: '010', AccountName: 'Nike', Acctype1: 'Ne', Acctype2: 'Z', Acctype3: 'B'},

];

export class ExampleDataSource extends DataSource<any> {

  connect(): Observable<Element[]> {
    return Observable.of(data);
  }
  disconnect() {}
}

What I want to do is console.log all the data from the table and dropdown menu. Currently, when I select an option, the console logs

ƒ DataSource() {
    }

which obviously isn't what I need.

What am I doing wrong? This is the relevant HTML for the table:

<div id='table-container'>
  <form id='accForm'>
  <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="Account Number">
      <mat-header-cell *matHeaderCellDef> Account Number </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.AccountNumber}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Account Name">
      <mat-header-cell *matHeaderCellDef> Account Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.AccountName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Acctype1">
      <mat-header-cell *matHeaderCellDef> 2016/17 Account Type </mat-header-cell>
        <mat-cell *matCellDef="let element" id="accType">
          <mat-form-field>
            <mat-select name= 'acctype_id' [(ngModel)]="element.accType1" (change)="onSelect()" placeholder="Select Type">
              <mat-option *ngFor="let acctype of acctypes" [value]="acctype.value">
                {{ acctype.viewValue }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Acctype2">
      <mat-header-cell *matHeaderCellDef> 2015/16 Account Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.Acctype2}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Acctype3">
      <mat-header-cell *matHeaderCellDef> 2014/15 Account Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.Acctype3}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </form>
</div>

I've been stuck on this for days, any help would be appreciated

Answer 1

You need to pass element as an argument in the onSelect method:

<mat-select name= 'acctype_id' [(ngModel)]="element.accType1" (change)="onSelect(element)" placeholder="Select Type">
    <mat-option *ngFor="let acctype of acctypes" [value]="acctype.value">
    {{ acctype.viewValue }}
    </mat-option>
</mat-select>

In ts file you need to accept it as a parameter:

onSelect(element: Element){
    console.log(element)
}