src/app/apm/manage/manage.component.ts
| selector | apm-manage |
| styleUrls | ./manage.component.scss |
| templateUrl | ./manage.component.html |
Properties |
Methods |
constructor(service: ManageService, dialog: MatDialog)
|
|||||||||
|
Defined in src/app/apm/manage/manage.component.ts:24
|
|||||||||
|
Parameters :
|
| isAllSelected |
isAllSelected()
|
|
Defined in src/app/apm/manage/manage.component.ts:35
|
|
Returns :
boolean
|
| masterToggle |
masterToggle()
|
|
Defined in src/app/apm/manage/manage.component.ts:41
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/apm/manage/manage.component.ts:28
|
|
Returns :
void
|
| onDeleteTriggered |
onDeleteTriggered()
|
|
Defined in src/app/apm/manage/manage.component.ts:73
|
|
Returns :
void
|
| onEditorTriggered | ||||
onEditorTriggered(item)
|
||||
|
Defined in src/app/apm/manage/manage.component.ts:61
|
||||
|
Parameters :
Returns :
void
|
| onNew | ||||
onNew(event)
|
||||
|
Defined in src/app/apm/manage/manage.component.ts:51
|
||||
|
Parameters :
Returns :
void
|
| rowSelection | ||||||
rowSelection(row, event)
|
||||||
|
Defined in src/app/apm/manage/manage.component.ts:47
|
||||||
|
Parameters :
Returns :
void
|
| dataSource |
Type : any
|
Default value : new MatTableDataSource([])
|
|
Defined in src/app/apm/manage/manage.component.ts:20
|
| displayedColumns |
Type : string[]
|
Default value : ['select', 'name', 'apiKey', 'code', 'star']
|
|
Defined in src/app/apm/manage/manage.component.ts:18
|
| paginator |
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator, {static: false})
|
|
Defined in src/app/apm/manage/manage.component.ts:23
|
| selection |
Default value : new SelectionModel(true, [])
|
|
Defined in src/app/apm/manage/manage.component.ts:21
|
| sort |
Type : MatSort
|
Decorators :
@ViewChild(MatSort, {static: false})
|
|
Defined in src/app/apm/manage/manage.component.ts:24
|
import { Component, OnInit, ViewChild } from '@angular/core';
import {
MatDialog,
MatPaginator,
MatSort,
MatTableDataSource
} from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { ManageService } from './manage.service';
import { NewComponent } from './new/new.component';
@Component({
selector: 'apm-manage',
templateUrl: './manage.component.html',
styleUrls: ['./manage.component.scss']
})
export class ManageComponent implements OnInit {
displayedColumns: string[] = ['select', 'name', 'apiKey', 'code', 'star'];
dataSource: any = new MatTableDataSource([]);
selection = new SelectionModel(true, []);
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
constructor(private service: ManageService, private dialog: MatDialog) { }
ngOnInit() {
this.service.getList().subscribe(res => {
this.dataSource = new MatTableDataSource(res.data);
this.dataSource.paginator = this.paginator;
});
}
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected()
? this.selection.clear()
: this.dataSource.data.forEach(row => this.selection.select(row));
}
rowSelection(row, event) {
this.selection.toggle(row);
}
onNew(event) {
let dialogRef = this.dialog.open(NewComponent, {
width: '500px'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
onEditorTriggered(item) {
console.log(item);
let dialogRef = this.dialog.open(NewComponent, {
width: '500px',
data: item
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
onDeleteTriggered() {
console.log(this.selection.selected);
// this.service.delete(this.selection.selected);
}
}
<button mat-raised-button (click)="onNew($event)">
<mat-icon>add</mat-icon> 添加
</button>
<button mat-raised-button (click)="onDeleteTriggered()" [disabled]="!selection.hasValue()">
<mat-icon>delete</mat-icon> 删除
</button>
<div class="mat-elevation-z4">
<div class="table-container">
<table class="table-hover" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select" sticky>
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>应用名称</th>
<td mat-cell *matCellDef="let element">{{ element.system_name }}</td>
</ng-container>
<ng-container matColumnDef="apiKey">
<th mat-header-cell *matHeaderCellDef>appId</th>
<td mat-cell *matCellDef="let element">{{ element.app_id }}</td>
</ng-container>
<ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef>是否可用</th>
<td mat-cell *matCellDef="let element">
{{ element.is_use?"否":"是" }}
</td>
</ng-container>
<ng-container matColumnDef="star">
<th mat-header-cell *matHeaderCellDef>操作</th>
<td mat-cell *matCellDef="let element" (click)="onEditorTriggered(element); $event.stopPropagation()">
编辑
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowSelection(row)"></tr>
</table>
</div>
<mat-paginator [pageSize]="10"></mat-paginator>
</div>
./manage.component.scss
:host {
display: block;
margin: 24px;
}
button {
margin: 0 16px 16px 0;
}
.table-container {
position: relative;
overflow: auto;
}
table {
width: 100%;
}
.mat-column-select {
width: 32px;
}