File

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

Implements

OnInit

Metadata

selector	`error-detail`
styleUrls	`./detail.component.scss`
templateUrl	`./detail.component.html`

Index

Constructor

constructor()

Defined in src/app/apm/error/detail/detail.component.ts:41

Inputs

opened
Type : `boolean`
Default value : `false`
Defined in src/app/apm/error/detail/detail.component.ts:9

Outputs

onOpened
Type : `EventEmitter`
Defined in src/app/apm/error/detail/detail.component.ts:10

Methods

ngOnInit

ngOnInit()

Defined in src/app/apm/error/detail/detail.component.ts:45

Returns : void

onCloseTriggered

onCloseTriggered()

Defined in src/app/apm/error/detail/detail.component.ts:47

Returns : void

Properties

dataSource

Type : []

Default value :

[
    {
      name: '时间',
      value: '2017-09-11T03:35:03.155Z'
    },
    {
      name: '事件类型',
      value: 'resourceError'
    },
    {
      name: 'method',
      value: 'GET'
    }
  ]

Defined in src/app/apm/error/detail/detail.component.ts:13

devicesDataSource

Type : []

Default value :

[
    {
      name: 'IP',
      value: '127.0.0.1'
    },
    {
      name: '地区',
      value: '中国'
    },
    {
      name: '浏览器',
      value: 'chrome 61.0.3163.100'
    }
  ]

Defined in src/app/apm/error/detail/detail.component.ts:28

displayedColumns

Type : string[]

Default value : ['name', 'value']

Defined in src/app/apm/error/detail/detail.component.ts:12

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'error-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {
  @Input() opened: boolean = false;
  @Output() onOpened = new EventEmitter();

  displayedColumns: string[] = ['name', 'value'];
  dataSource = [
    {
      name: '时间',
      value: '2017-09-11T03:35:03.155Z'
    },
    {
      name: '事件类型',
      value: 'resourceError'
    },
    {
      name: 'method',
      value: 'GET'
    }
  ];

  devicesDataSource = [
    {
      name: 'IP',
      value: '127.0.0.1'
    },
    {
      name: '地区',
      value: '中国'
    },
    {
      name: '浏览器',
      value: 'chrome 61.0.3163.100'
    }
  ];

  constructor() {}

  ngOnInit() {}

  onCloseTriggered() {
    this.opened = false;
    this.onOpened.emit(this.opened);
  }
}

<div class="error-detail-container mat-elevation-z8" [class.open]="opened">
  <button class="close" mat-icon-button (click)="onCloseTriggered()">
    <mat-icon>close</mat-icon>
  </button>

  <div class="column-title">事件详情</div>
  <table mat-table [dataSource]="dataSource">
    <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-header-row *matHeaderRowDef="displayedColumns"></tr> -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></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: displayedColumns"></tr>
  </table>
</div>

./detail.component.scss

.error-detail-container {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 500px;
  padding: 10px 15px;
  background: #fff;
  z-index: 10;

  visibility: hidden;
  transform: translateX(110%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    visibility 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  &.open {
    transform: translateY(0);
    visibility: visible;
  }
}

.close {
  position: absolute;
  top: 0;
  left: -40px;
  background: #fff;
  border-radius: 0;
}

.column-title {
  padding-top: 16px;
  padding-bottom: 16px;
  font-weight: 500;
  font-size: 16px;
}

table {
  width: 100%;
}

Legend

Html element

Component

Html element with directive

File

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""