HTML/TypeScript在角度2中显示多个复选框值
问题描述:
问题是,我想要能够选择多个复选框,并单击测试按钮,在控制台中显示选定的框。这里的问题是,我只使用一个显示在几行中的复选框。 I'm采用了棱角分明2与材料设计组件和角火2.HTML/TypeScript在角度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>
- 强大的文本
答
你需要保持跟踪哪个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,你也许可以找到适合您的需要一些好东西...
从你问题不是很清楚你想达到什么目的,主要是你为什么不把多个复选框放在你需要的地方,什么阻止你这样做? – Vega
因为复选框是为创建的每个表格行创建的,这取决于每种情况下有多少行。复选框的数量永远不会相同! – emilogge
所以你的问题是如何做到这一点? – Vega