标签: mat-table

我正在尝试在 Angular 5 项目中使用 mat-table 但出现此错误。我导入了MatTableModule它所需的一切，但仍然收到此错误：

ng：“mat-table”不是已知元素： 1. 如果“mat-table”是 Angular 组件，则验证它是否是该模块的一部分。2. 如果“mat-table”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

这是我的 admin.module.ts，它是我的组件的父模块：

import { AdminRoutingModule } from './admin-routing/admin-routing.module';
import { AdminControlSidebarComponent } from './admin-control-sidebar/admin-control-sidebar.component';
import { AdminFooterComponent } from './admin-footer/admin-footer.component';
import { AdminContentComponent } from './admin-content/admin-content.component';
import { AdminLeftSideComponent } from './admin-left-side/admin-left-side.component';
import { AdminHeaderComponent } from './admin-header/admin-header.component';
import { AdminComponent } from './admin.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { JobOfferComponent } from './Component/job-offer/job-offer.component';
import {HttpClientModule} …

有没有人有一个很好的解决方案来将内联文本编辑添加到列中，您可以在其中使用 mat 表进行编辑、保存和重新编辑，如本例所示：https : //material.io/design/components/data-tables.html#行为 看起来它仍然是 gitHub 上的一个悬而未决的问题：https : //github.com/angular/material2/issues/5982

我想在当前列的值上添加一个条件。我无法读取当前行的值。我不知道我必须使用什么变量来检查我使用的行但未定义的条件

<ng-container matColumnDef="idCve">
    <th mat-header-cell matHeaderCellDef mat-sort-header> IDCVE </th>
    <ng-container ngIf="row.idCve != null; else dothis" >
        <td mat-cell matCellDef="let row"> {{row.idCve}} </td>
    </ng-container>
    <ng-template #dothid>
        <td mat-cell matCellDef="let row"> --------- </td>
    </ng-template>
</ng-container>

TS文件

Constructor(vulnerabilityServiceService: VulnerabilityServiceService) {
    const vulnerabilities = vulnerabilityServiceService.getVulnerabilities();
    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource(vulnerabilities);
}

我正在尝试将mat-table边界设为圆形。但它不起作用。试过这个-

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 1em;
}

如何实现这一目标？

再见，

我正在使用 Angular 8，但在对“计算”列进行排序时遇到问题。假设我有一个具有两个属性名称和描述的对象，如果我尝试将值与 .ts 文件内的函数连接，则排序不起作用。

这是我的标记：

<div class="col-md-12">
    <div class="row">

        <div class="example-container mat-elevation-z8">
            <mat-table [dataSource]="dataSource" matSort>
                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="description">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
                    <mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
                </ng-container>

        <ng-container matColumnDef="namedescription">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> NameDescription </mat-header-cell>
                    <mat-cell *matCellDef="let row" [style.color]=""> {{concatena(row)}} </mat-cell>
                </ng-container>

            </mat-table>

            <mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
        </div>
    </div>
</div>

这是我的代码：

import { Component, …

我使用本页mat-table面上的材质创建了一个基本列表，并且它的工作没有任何问题。但是，当尝试将操作列移动到如下所示的表 a 的末尾列时，第一列的顺序保持不变，并且没有任何意义。

<!-- I move this just below the tr tags -->
<!-- action column -->
<ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)">
    <button mat-button>
      <mat-icon>remove_shopping_cart</mat-icon>
    </button>
  </td>
</ng-container>


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

我还想在“操作”列中创建 3 个图标作为表的最后一列。有办法解决这个问题吗？

所以，我在 mat-table 中使用data-label有问题。我有一个包含大量数据列的表格，并希望使其具有响应性。我谷歌如何制作它并发现我可以使用data-label属性。问题是（据我所知）数据标签不能支持角度{{code}}。

它只能这样工作（仅限静态数据）。如果我试图在控制台中用花括号写一些东西，我有一个例外“无法绑定到‘标签’，因为它不是‘垫单元’的已知属性。1.如果‘垫单元’是一个 Angular 组件，它有 'label' 输入，然后验证它是这个模块的一部分。2. 如果 'mat-cell' 是一个 Web 组件，那么将 'CUSTOM_ELEMENTS_SCHEMA' 添加到这个组件的 '@NgModule.schemas' 到压制这个消息。”

谁能告诉我如何解决这个问题，谢谢！

静态数据在这里工作

<div class="example-header" fxLayout="row">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<div class="example-container mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort>
    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
      <mat-cell *matCellDef="let row" data-label="id"> {{row.cnt}} </mat-cell>
    </ng-container>
    <!-- Progress Column -->
    <ng-container matColumnDef="progress">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Progress </mat-header-cell>
      <mat-cell *matCellDef="let row" data-label="progress"> {{row.progress}}% </mat-cell>
    </ng-container>
    <!-- Name Column …

当过滤器与以下内容不匹配时，我尝试显示空消息错误：

<div *ngIf="dataSource.length === 0">No data</div>

但它不起作用，因为我用 MatTableDataSource 构建了一个动态表。

为了更好地理解，我将动态表更改为预定义的数组。

const ELEMENT_DATA: MembersElement[] = [
{ name: 'Jenny', age: 17 },
{ name: 'Daniel', age: 18 }
];

但是，有必要使用 MatTableDataSource 来动态构建用户表

这是我所有的ts代码。

    import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material';

export interface SociosElement {
  nombre: string;
  edad: number;
}

const ELEMENT_DATA: MembersElement[] = [
  { name: 'Jenny', age: 17 },
  { name: 'Daniel', age: 18 }
];

@Component({
  selector: 'app-pruebas',
  templateUrl: './tableMembers.component.html',
  styleUrls: ['./tableMembes.component.css']
})
export class …

我想知道如何使用 Angular Material mat-table 仅显示行的垂直滚动条（标题不移动）。当我在 mat-table 样式中设置 overflow: auto 和 max-height 时，整个表格（包括标题）都会滚动。谢谢你的帮助。

我正在尝试将行删除添加到我的<mat-table>. 表格的大部分工作正常，但复选框列未显示。以前，代码不包含该<!-- Checkbox/Selection Column -->部分。我在使用 angular.material.io 上的示例之一时添加了它。

我有点困惑，因为在我看来，模式应该是<th>&<td>包裹在<ng-container>. 我似乎在这里遗漏了一些东西，因为复选框/选择列没有显示，浏览器控制台中没有任何错误，并且ng servepowershell 中没有抛出任何错误。

<table mat-table [dataSource]="dataSource" matSort>

    <!-- Checkbox/Selection Column -->
    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox [checked]="false" [aria-label]="checkboxLabel()">
            </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
            <mat-checkbox [checked]="true"></mat-checkbox>
        </td>
    </ng-container>

    <!-- Working Columns -->
    <ng-container *ngFor="let field of Fields" matColumnDef="{{field.name}}">
        <th class="w-134" mat-header-cell *matHeaderCellDef mat-sort-header>{{field.name}}</th>
        <td class="w-130" mat-cell *matCellDef="let row">
            <input *ngIf="field.editType == 'free'" matInput [(ngModel)]="row[field.name]" placeholder="{{row[field.name]}}" required>
            <mat-select *ngIf="field.editType == …