HTML/TypeScript在角度2中顯示多個複選框值

Question

問題是，我想要能夠選擇多個複選框，並單擊測試按鈕，在控制檯中顯示選定的框。這裏的問題是，我只使用一個顯示在幾行中的複選框。 I'm採用了棱角分明2與材料設計組件和角火2.

//TypeScript 
 
import { Component, Input, OnInit } from '@angular/core'; 
 
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; 
 
import { DataSource } from '@angular/cdk'; 
 

 
@Component({ 
 
    selector: 'waybill-billing', 
 
    templateUrl: './waybillbilling.component.html', 
 
    styleUrls: ['./waybillbilling.component.css'] 
 
}) 
 
    
 

 
export class WaybillBillingComponent implements OnInit { 
 
    checked = false; 
 
    @Input('id') waybillId: string; 
 
    displayedColumns = ['status', 'type', 'articleId', 'description', 'amount']; 
 
    dataSource: FirebaseDataSource; 
 
    
 
    constructor(private db: AngularFireDatabase){} 
 
    
 

 
    ngOnInit(): void { 
 
    this.dataSource = new FirebaseDataSource(this.db, this.waybillId); 
 
    } 
 

 

 
} 
 

 
export class FirebaseDataSource extends DataSource<any> { 
 

 
    items: FirebaseListObservable<any[]>; 
 
    constructor(private db: AngularFireDatabase, private waybillId: string) { 
 
    super(); 
 
    } 
 

 
    connect(): FirebaseListObservable<any[]> { 
 
    this.items = this.db.list('xxx/pieces/' + this.waybillId); 
 
    console.log(this.items); 
 
    return this.items; 
 
    } 
 

 
    disconnect(){ 
 

 
    } 
 
}

//HTML 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="script.js"></script> 
 

 
<div class="example-container mat-elevation-z8"> 
 

 
    <md-table #table [dataSource]="dataSource" class="mat-typography"> 
 

 
    <div> ng-controller="AppCtrl"> 
 
    <ng-container cdkColumnDef="status"> 
 
     <md-header-cell class="body-2" *cdkHeaderCellDef> Status </md-header-cell> 
 
     <md-cell class="body-1" *cdkCellDef="let row"> 
 
     <md-checkbox></md-checkbox> 
 
     </md-cell> 
 
    </ng-container> 
 
    </div> 
 

 
    <!-- Type Column --> 
 
    <ng-container cdkColumnDef="type"> 
 
     <md-header-cell class="body-2" *cdkHeaderCellDef> Type </md-header-cell> 
 
     <md-cell class="body-1" *cdkCellDef="let row"> 
 
     <md-chip-list><md-chip selected="true" color="blue">{{row.type}}</md-chip></md-chip-list> 
 
     </md-cell> 
 
    </ng-container> 
 

 
    <!-- Article Column --> 
 
    <ng-container cdkColumnDef="articleId"> 
 
     <md-header-cell class="body-2" *cdkHeaderCellDef> Art.nr </md-header-cell> 
 
     <md-cell class="body-1" *cdkCellDef="let row"> {{row.articleId}} </md-cell> 
 
    </ng-container> 
 

 
    <!-- Description Column --> 
 
    <ng-container cdkColumnDef="description"> 
 
     <md-header-cell class="body-2" *cdkHeaderCellDef> Beskrivning </md-header-cell> 
 
     <md-cell class="body-1" *cdkCellDef="let row"> {{row.description}} </md-cell> 
 
    </ng-container> 
 

 
    <!-- Amount Column --> 
 
    <ng-container cdkColumnDef="amount"> 
 
     <md-header-cell class="body-2" *cdkHeaderCellDef> kg/st </md-header-cell> 
 
     <md-cell class="body-1" *cdkCellDef="let row"> {{row.amount}} kg </md-cell> 
 
    </ng-container> 
 

 
    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
 
    
 
    
 
    </md-table> 
 
    
 
<button (click)="test()" md-button>Testing</button> 
 
</div>

1. 強大的文本

Answer 1

你需要保持跟蹤哪個checkb oxes檢查：

<ng-container cdkColumnDef="select"> 
    <md-header-cell *cdkHeaderCellDef> Status </md-header-cell> 
    <md-cell *cdkCellDef="let row"> 
    <md-checkbox (click)="$event.stopPropagation()" 
       (change)="$event ? selection.toggle(row.$key) : null" 
       [checked]="selection.isSelected(row.$key)"> 
    </md-checkbox> 
    </md-cell> 
</ng-container> 

在您的代碼：

import {SelectionModel} from '@angular/material'; 

selection = new SelectionModel<string>(true, []); 

這裏是一個plunker，你也許可以找到適合您的需要一些好東西...

md-table with checkboxes