Question

这是我关于Stack Overflow的第一篇文章，所以我希望我自己弄清楚。

我正在尝试创建带有动态列的表，但是我不明白如何将matColumnDef绑定到数组中的特定元素位置。由于我的原始代码更加复杂且难以遵循，因此我将发布一个更简单的版本，其中包含问题本身。

这是HTML代码。我应该在“日期”中为内部数组（数字）的每个元素创建一列（在这种情况下，有2个，但是在我的原始应用程序中，数组是动态的，有时有2个元素，有时有4个元素等）

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

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

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

<div *ngFor="let number of date;let i=index;">
 <ng-container matColumnDef="{{i}}">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.numere[i]}} </td>
  </ng-container>
</div>

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

这是打字稿代码：

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

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  numere: Array<string>;
}



/**
 * @title Table with filtering
 */
@Component({
  selector: 'table-filtering-example',
  styleUrls: ['table-filtering-example.css'],
  templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
  date: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', numere: ["alb","negru"]},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He',numere: ["alb","negru"]},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li',numere: ["galben","roz"]},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be',numere: ["alb","negru"]},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B',numere: ["galben","roz"]},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C',numere: ["alb","negru"]},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N',numere: ["maro","roz"]},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O',numere: ["pink","bombon roz"]},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F',numere: ["alb","negru"]},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne',numere: ["alb","negru"]},
];
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','0','1'];
  dataSource = new MatTableDataSource(this.date);

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

现在..我想出了一种将元素分配给列的方法，即为它们赋予索引0、1、2，...，array.length，并且可以在实际表中显示它们，但是...

问题是，如果我想在表上添加过滤器或在这些列上添加mat-sort-header，它将无法正常工作。例如，排序需要具有与matColumnDef相同的“属性名称”（即：element。 position <=> matColumnDef =' position '）。但是在这种情况下，我没有数组中每个元素的属性名（类似“ numere [0]”，“ numere [1]”等），只有数组的属性名本身通常将其应用于所有列，并且不起作用。

因此，如果我想相对于表中的第一个元素（'numere [0]'）对表进行排序，则将无法执行，因为没有吸吮属性名称（如numere [x]）。

任何想法我该如何实现？另外，我想坚持使用Angular Material库，而不要更改其他选项，因为据说我这样做。

Answer 1

由于没有提及任何解决方案。我会尝试我的。因此，我必须展示最初是maxSelectedItems =“ 3”

的演员，导演和类型

actors: (2) [{…}, {…}] , 
directors: [{…}] , 
genres: (2) [{…}, {…}] 

<ng-container matColumnDef="actors">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Actors </th>
    <td mat-cell *matCellDef="let row"> {{ row.actors[0].name}} {{row.actors[1] !== undefined ? row.actors[1].name : ''}} {{ row.actors[2] !== undefined ? row.actors[2].name : ''}}</td>
</ng-container>

Answer 2

我将处理该数组并将其展平，以便在数组内部没有嵌套的数组。如果我能不被黑客入侵就逃脱，我会的。

对于排序，材质有其自己的排序模块，请不要忘记将其导入到您的模块中。否则，Angualar将忽略matSort mat-sort-header之类的指令，而不会出现任何错误消息。我曾经想知道为什么我的排序无法正常工作，却发现我忘记导入MatSortModule。

材料doc网站如果在发帖时脱机，从内存来看，我认为是为了使排序工作正常：

导入MatSortModule
将matSort添加到mat-table或table元素
将mat-sort-header添加到要启用排序功能的mat-header-cell
使用@ViewChild在组件类中获取matSort
将以上内容分配给生命周期挂钩ngAfterViewInit中的数据源

希望以上内容对您有所帮助。

带有内部数组的Angular2 MatTable数据

2 个答案: