[英]How can I console.log the selected option from angular Material form and table? ANGULAR 4
我有一張用角材料制成的桌子。 它包含在ts文件中作為對象的一些數據。 請參見下面的代碼:
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() {}
}
我想做的是console.log從表和下拉菜單中的所有數據。 當前,當我選擇一個選項時,控制台會記錄
ƒ DataSource() {
}
這顯然不是我所需要的。
我究竟做錯了什么? 這是該表的相關HTML:
<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>
我已經堅持了好幾天,任何幫助將不勝感激
您需要在onSelect
方法中將element
作為參數傳遞:
<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>
在ts文件中,您需要接受它作為參數:
onSelect(element: Element){
console.log(element)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.