标签: mat-table

有人知道是否有可能创建一个"列"组件用于mat-table,我尝试为常用的列定义创建一个组件但是当添加到表时我得到一个无法找到列选择器的错误,我的专栏定义如下:

@Component({
  selector: 'iam-select-column',
  template: `
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef>
      <mat-checkbox></mat-checkbox>
    </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-checkbox></mat-checkbox>
    </mat-cell>
  </ng-container>
  `,
  styles: [`
  `]
})
export class SelectColumnComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

并在表中使用它

<mat-table class="mat-elevation-z8">

  <iam-select-column></iam-select-column>

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

</mat-table>

和displayedColumns是:

  displayedColumns = [
    'select'
  ];

是否可以这样做,因为我想避免在我有一个选择列的表中重复？

我想在表格单元格中添加不同样式的多行。不过，Angular Material 表似乎剥离了我的 HTML 代码。我怎样才能在Gitlab中实现类似的东西，其中一行/项目内的第一行（例如“管理员”）的样式与第二行（例如电子邮件地址）的样式不同，如代码示例所示。

表格组件.html

<ng-container matColumnDef="name">
   <mat-header-cell *matHeaderCellDef>{{header}}</mat-header-cell>
   <mat-cell *matCellDef="let row">

      <!-- first approach -->
      <div class="firstline">{{row.firstline}}</div>
      <div class="secondline">{{row.secondline}}</div>

      <!-- second approach -->
      <multiline-component [firstline]="row.firstline" [secondline]="row.secondline"></multiline-component>

   </mat-cell>
</ng-container>

多行组件.html

<div class="firstline">{{firstline}}</div> // I want to be bold
<div class="secondline">{{secondline}}</div> // I want to be just regular

我尝试将 [innerHTML] 与 bypassSecurityTrustHtml()-Pipe 一起使用，以防止剥离失败。我还尝试使用具有 [firstline] 和 [secondline] 属性绑定的自定义组件。

我只想在状态==“完成”时在表上显示数据。我尝试做，但我所做的只是删除状态，但它仍然显示该行。这个怎么做？

数据

    { 
        equipmentOrdered: 'laptop', 
        qty: 1,
        status: 'processing', 
    },
    { 
        equipmentOrdered: desktop, 
        qty: 2,
        status: 'done', 
    },
    { 
        equipmentOrdered: 'keyboard', 
        qty: 2,
        status: 'processing', 
    },

桌子

      <ng-container matColumnDef="equipmentOrdered"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.equipmentOrdered}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="qty"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>QTY</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.qty}}</mat-cell>
      </ng-container>

      //this is just not displaying the status, how to not include whole row?
      <ng-container matColumnDef="status"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
          <mat-cell *matCellDef="let purchaseOrder">
            <ng-container *ngIf="purchaseOrder.status !='done' ">
            {{purchaseOrder.status}}
          </ng-container>
          </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; …

我有下表

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

<!-- Name Column -->
<ng-container matColumnDef="employee.name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let employeeWrapper">{{employeeWrapper.employee.name}}</td>
    </ng-container>

    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let employeeWrapper">{{employeeWrapper.id}}</td>
    </ng-container>

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

从这个答案，matColumnDef和对象属性必须具有相同的名称。

我做对了，employeeWrapper.id而且这种方式正在起作用。

但是对于employeeWrapper.employee.name，它是二级属性。设置matColumnDef为employee.name或name不起作用。我两个都试过了。

这个问题有解决方案/解决方法吗？

我有一个 mat-table，每页最多可以显示 100 个条目。起初，我在底部有一个垫子分页器，效果很好。现在我被要求在表格顶部设置一个分页器，在表格底部设置另一个分页器，因此如果用户正在寻找位于顶端。
问题是两个分页器必须链接到同一个数据源。我尝试为每个 ID 提供不同的 ID，使用 ViewChild 获取它们并将它们分配给相同的数据源，但它仅适用于其中之一。

main.component.ts:

    flights: Flight[] =[];
    dataSource = new MatTableDataSource<Flight>(this.flights);
    @ViewChild('PAGINATOR') paginator: MatPaginator;
    @ViewChild('OTROPAGINATOR') paginatorOtro: MatPaginator;

main.component.html：

   <mat-paginator #PAGINATOR (page)="pageEvent = handlePage($event)" 
   [length]="length" [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons> 
   </mat-paginator>

   <table mat-table ...> ... </table>

  <mat-paginator #OTROPAGINATOR (page)="pageEvent = handlePage($event)" 
  [length]="length" [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons> 
  </mat-paginator>

将分页器链接到数据源：

    this.dataSource = new MatTableDataSource<Flight>(this.flights);
    this.dataSource.paginator = this.paginator;
    this.dataSource.paginator = this.paginatorOtro;

有人可以指导我吗？

从文档示例中，我尝试使用 mat 表导出器，如下所示：

<ng-container>
    <mat-card class="mat-card py-0">
        <mat-card-header class="label">
          <ng-container>
            <mat-card-title>{{titoloTabella}}</mat-card-title> 
            <button mat-button class="align-right" (click)="changeClass()">
              <mat-icon [ngClass]="(rotate)?'rotate':'no-rotate'">keyboard_arrow_down</mat-icon>
              </button>
          </ng-container>
          </mat-card-header>
  <table mat-table  matSort [dataSource]="dataSource" matTableExporter #exporter="matTableExporter">
    <ng-container *ngFor="let header of tableConfiguration.tableHeaders; let i = index" matColumnDef="{{ header.headerId }}"> 
      <th mat-header-cell mat-sort-header *matHeaderCellDef>{{ header.headerName }}</th> 

      <td mat-cell *matCellDef="let row" > {{ row[header.headerId] }} </td> 

      <ng-container *ngIf="i == 0 && header.isJoinable == 'no'">
          <td mat-footer-cell *matFooterCellDef>TOTALE</td>
      </ng-container>
      <ng-container *ngIf="i > 0">    
          <td mat-footer-cell *matFooterCellDef>{{ tableFooter[header.headerId] }}</td>
    </ng-container>
    </ng-container>
    <tr mat-header-row …

我在此结构中有对象数组：

data = [ 
  {
    course: 'Angular',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React Native',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  } …

我正在使用带有 formArray 的 mat-table，我还需要 Mat-paginator。

但不幸的是分页不起作用。

Stackbltiz 演示

样本来源，

.html

<form [formGroup]="form">
  <table mat-table [dataSource]="dataSource" formArrayName="dates">
    <!-- Row definitions -->
    <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
    <tr mat-row *matRowDef="let row; let i = index; columns: displayColumns;"></tr>

    <!-- Column definitions -->
    <ng-container matColumnDef="from">
      <th mat-header-cell *matHeaderCellDef> From </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index"> 
        <input type="date" formControlName="from" placeholder="From date">
      </td>
    </ng-container>

    <ng-container matColumnDef="to">
      <th mat-header-cell *matHeaderCellDef> To </th>
      <td mat-cell *matCellDef="let row; let index = index"  [formGroupName]="index">
        <input type="date" formControlName="to" placeholder="To …

问题陈述

我有一个 Angular 材料表，我想显示数据，但它在这些行上中断：

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

并说：

类型“ContentComponent”上不存在属性“displayedColumns”。

代码

超文本标记语言

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

    <ng-container>
        <mat-header-cell *matHeaderCellDef>First name</mat-header-cell>
        <mat-cell *matCellDef="let student"> {{student.firstName}} </mat-cell>
    </ng-container>

    <ng-container>
        <mat-header-cell *matHeaderCellDef>Last name</mat-header-cell>
        <mat-cell *matCellDef="let student"> {{student.lastName}} </mat-cell>
    </ng-container>

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

.TS文件

import { Component, OnInit, Input } from '@angular/core';
import { Student } from '../Models/Student';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { …

我的mat-paginator子组件如下所示：

子组件.html

<mat-paginator #paginator></mat-paginator>

我想使用@ViewChild()如下所示从父组件获取此分页器：

父组件.html

<child 
    <!-- code omitted for simplicity -->
>
</child>

@ViewChild('paginator') paginator: MatPaginator;

resetPaginator() {          
    this.paginator.firstPage();
}

但由于this.paginator未定义，我无法访问子组件中的分页器。我不确定如何从父级访问分页器。一种方法可能是使用以下方法，但如果有一种优雅的方法，我会更喜欢它。任何想法？

@ViewChild(ChildComponent) child: ChildComponent;