angular-material-app documentation
  1. Components
  2. DetailComponent

File

src/app/apm/collection/detail/detail.component.ts

Implements

OnInit

Metadata

selector apm-collection-detail
styleUrls ./detail.component.scss
templateUrl ./detail.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()
Defined in src/app/apm/collection/detail/detail.component.ts:12

Inputs

devicesDataSource
Default value : []
Defined in src/app/apm/collection/detail/detail.component.ts:12
eventDataSource
Default value : []
Defined in src/app/apm/collection/detail/detail.component.ts:11

Methods

ngOnInit
ngOnInit()
Defined in src/app/apm/collection/detail/detail.component.ts:16
Returns : void

Properties

detailColumns
Type : string[]
Default value : ['name', 'value']
Defined in src/app/apm/collection/detail/detail.component.ts:9
 
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() {}
}
Copy
<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>
Copy

./detail.component.scss 

.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;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""