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

File

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

Implements

OnInit

Metadata

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

Index

Properties
Methods
Inputs

Constructor

constructor()
Defined in src/app/apm/script/detail/detail.component.ts:66

Inputs

devicesDataSource
Default value : [ { name: 'IP地址', value: '' }, { name: '来源城市', value: '' }, { name: '浏览器', value: '' }, { name: '操作系统', value: '' }, { name: 'language', value: '' }, { name: 'userAgent', value: '' } ]
Defined in src/app/apm/script/detail/detail.component.ts:41
eventDataSource
Default value : [ { name: '生成时间', value: '' }, { name: '错误类型', value: '' }, { name: '错误信息', value: '' }, { name: '错误资源', value: '' }, { name: '出错行号', value: '' }, { name: '出错列号', value: '' }, { name: '错误详情', value: '' } ]
Defined in src/app/apm/script/detail/detail.component.ts:10

Methods

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

Properties

detailColumns
Type : string[]
Default value : ['name', 'value']
Defined in src/app/apm/script/detail/detail.component.ts:9
 
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'apm-script-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {
  detailColumns: string[] = ['name', 'value'];
  @Input() eventDataSource = [
    {
      name: '生成时间',
      value: ''
    },
    {
      name: '错误类型',
      value: ''
    },
    {
      name: '错误信息',
      value: ''
    },
    {
      name: '错误资源',
      value: ''
    },
    {
      name: '出错行号',
      value: ''
    },
    {
      name: '出错列号',
      value: ''
    },
    {
      name: '错误详情',
      value: ''
    }
  ];

  @Input() devicesDataSource = [
    {
      name: 'IP地址',
      value: ''
    },
    {
      name: '来源城市',
      value: ''
    },
    {
      name: '浏览器',
      value: ''
    },
    {
      name: '操作系统',
      value: ''
    },
    {
      name: 'language',
      value: ''
    },
    {
      name: 'userAgent',
      value: ''
    }
  ];

  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 ""