角度 8 CSS 查询上的角度材料

Posted 2023-03-06

【中文标题】角度 8 CSS 查询上的角度材料

【英文标题】：Angular material on angular 8 CSS query

【发布时间】：2020-05-24 04:42:50

【问题描述】：

目前，我正在制作一个有角度的材料垫桌，我无法将垫桌放置在网站的中心。它完全分布在各处。还有一个挑战是获取图标。当它处于活动状态时，我希望有一个绿色图标，而当它处于空闲状态时，它是灰色图标。

谁能帮帮我。

当前截图：

例外截图：

我已经为这个表创建了一个组件。这是我的 tablemapping.component.html

'''代码

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>

<!-- Application Column -->
  <ng-container matColumnDef="Application">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Application </th>
    <td mat-cell *matCellDef="let row"> row.Application </td>
  </ng-container>

  <!-- TR0 Column -->
  <ng-container matColumnDef="TR0">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> TR0 </th>
    <td mat-cell *matCellDef="let row"> row.TR0 </td>
  </ng-container>

  <!-- TR1 Column -->
  <ng-container matColumnDef="TR1">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> TR1 </th>
    <td mat-cell *matCellDef="let row"> row.TR1 </td>
  </ng-container>

  <!-- TR2 Column -->
  <ng-container matColumnDef="TR2">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> TR2 </th>
    <td mat-cell *matCellDef="let row"> row.TR2 </td>
  </ng-container>

    <!-- TR3Column -->
    <ng-container matColumnDef="TR3">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> TR3 </th>
        <td mat-cell *matCellDef="let row"> row.TR3 </td>
      </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

'''
 Here is my ts file:

'''code




  import  Component, Inject, OnInit, ViewChild  from '@angular/core';
    import  MatDialog, MatDialogRef, MAT_DIALOG_DATA  from '@angular/material/dialog';
    import  MatSort, MatTableDataSource  from '@angular/material';
    import  merge  from 'rxjs';
    import  UserService  from '../user.service'

    export interface User 
      application: string;
      tr0: string;
      tr1: string;
      tr2: string;
      tr3: number
      
    @Component(
      selector: 'app-table',
      templateUrl: 'tablemapping.component.html',
      styles: [
        `
          table 
            width: 100%;
          

          mat-icon 
            cursor: pointer;
          

          th.mat-sort-header-sorted 
            color: black;
          

        `
      ]
    )
    export class tablemapping implements OnInit 
      [x: string]: any;
      displayedColumns: string[] = ['Application', 'TR0', 'TR1', 'TR2', 'TR3'];
      dataSource;
      user;
      users: User[];
      constructor(private userService:UserService,public dialog: MatDialog)
       
      ngOnInit() 
         console.log("Super Star");

        this.userService.getUsers()
          .subscribe((users: User[]) => 
            this.users = users;
            console.log(this.users);
            console.log(JSON.stringify(this.users));
            // const temp = JSON.parse(users);
           this.dataSource = new MatTableDataSource(users);
           // this.dataSource.sort = this.sort;
          );
      
    

'''

【问题讨论】：

使用 div 并用宽度和高度将表格包裹在该 div 内？

@PrashantPimpale 我将尝试使用 div 以及一些填充和宽度，关于基于数据条件的列级图标有什么想法吗？

查看***.com/a/53023265/7124761

抱歉链接与列最大宽度或换行有关

你的意思是 - 对列级图标的任何想法以及基于数据的条件？还是编辑图标？还是删除图标？

【参考方案1】：

将表格包裹在 <div> 元素中，例如

<div class="container">
   .. your table and heading block
</div>

然后在 CSS 中：

.container 
  margin: 15px; --- it will add margin for four side to that div element

并用绿色圆点显示active：

td 内部：

<td>
  <span [ngClass]="'active-dot': element.status == 'Active', 'idle-dot':  element.status == 'Idle' "></span>
   element.status 
</td>

CSS：

.active-dot 
  height: 15px;
  width: 15px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;


.idle-dot 
  height: 15px;
  width: 15px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;

Working_Demo

【讨论】：

感谢@prashant，但有一个问题，我是角度的初学者..一旦我做出这些改变，我必须在styles.css中制作这个css而不是在组件的css中......如果我添加组件 css 中的这个 css 它没有反映..但是当添加到 style.css 中时它正在工作..

嘿@prashant.. 只是在寻找其他其他部分的问题..