File
Implements
Metadata
| selector |
apm-collection-detail |
| styleUrls |
./detail.component.scss |
| templateUrl |
./detail.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
devicesDataSource
|
Default value : []
|
|
|
|
eventDataSource
|
Default value : []
|
|
|
|
detailColumns
|
Type : string[]
|
Default value : ['name', 'value']
|
|
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'apm-collection-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {
detailColumns: string[] = ['name', 'value'];
@Input() eventDataSource = [];
@Input() devicesDataSource = [];
constructor() {}
ngOnInit() {}
}
<div class="detail-container">
<div class="column-title">事件详情</div>
<table mat-table [dataSource]="eventDataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.name }}:</td>
</ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.value }}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: detailColumns"></tr>
</table>
<div class="column-title">设备详情</div>
<table mat-table [dataSource]="devicesDataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.name }}:</td>
</ng-container>
<ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.value }}</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: detailColumns"></tr>
</table>
</div>
.detail-container {
padding: 10px 15px;
}
.column-title {
padding-top: 16px;
padding-bottom: 16px;
font-weight: 500;
font-size: 16px;
}
table {
width: 100%;
}
.mat-column-name {
width: 70px;
}
Legend
Html element with directive