Question

我正在从包含类别，名称和类别类型的后端对象类别下载。我想显示几个垫子表，每种都代表不同的类型。当我显示所有类别时，它没有任何问题，但是我想创建新的mat-table对象来单独显示表格。控制台显示对象已正确创建，但未以HTML显示-该位置为空

  displayedColumns: string[] = ['position', 'name', 'watki', 'id'];
  categories: Category[]  = [];
  programmingCategories: Category[] = [];

  constructor(private categoryService: CategoryService,
              private _router: Router) {
  }

  ngOnInit() {
    this.getCategories();
  }

  private getCategories() {
    this.categoryService.getAllCategories().subscribe((categories: any) => {
      this.categories = categories._embedded.categories;

      for(let i of this.categories)

       if(i.categoryType ==='Programowanie') {
        this.programmingCategories[i.id-1] = i;
        }
      }

    });
  }

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

    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> Programowanie </th>
      <td mat-cell *matCellDef="let category">
      <mat-icon mat-list-icon>assignment</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Kategoria</th>
      <td class="link" mat-cell *matCellDef="let category" (click)="getTopics(category)">
        {{category.title}}
      </td>
    </ng-container>

    <ng-container matColumnDef="watki">
      <th mat-header-cell *matHeaderCellDef> Liczba wątków</th>
      <td mat-cell *matCellDef="let category"> 
        {{category.size}}
      </td>

    </ng-container>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> Ostatni post</th>
      <td mat-cell *matCellDef="let category">
        <table><tr><td height="20" class="link">{{newestPost[category.id]?.topic?.title}}</td></tr>
        <tr><td height="20">Przez {{newestPost[category.id]?.postAuthor?.username}}</td></tr>
        <tr><td height="20" style="font-size:10px">  {{newestPost[category.id]?.createdDate | date: 'medium'}}</td></tr>
        </table>
        </td>
    </ng-container>

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

  </table>

Answer 1

我知道这很老了，但是万一有人需要一种方法来做到这一点。我没有使用上面的示例，因此您可以将其复制/粘贴到新的角度项目中。

我正在做的是在表中使用一种方法作为数据源，并且该方法正在根据表中传入的参数过滤组件中的完整数据集。

表格通过对“ positions”数组中的值执行ngFor来传递此参数，这就是我们要用来分割表格的数据。可以像本例中那样对其进行硬编码（好！），也可以使它成为动态填充的数组（好！）。

对于您的示例，在您的模块中，从@ angular / material导入MatTableModule。

在我们的app.component.ts

中

export class AppComponent { 
    outputData = [{ name: 'Alpha', position: 'front' }, 
                  { name: 'Beta', position: 'back' },
                  { name: 'Gamma', position: 'front' }, 
                  { name: 'Delta', position: 'back' }];
    positions = ['front', 'back'];

    sourceData(position: string) {
        return this.outputData.filter(data => data.position === position);
    }
}

和在app.component.html

中

<table mat-table *ngFor="let position of positions" [dataSource]="sourceData(position)">
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let output"> {{ output.name }} </td>
    </ng-container>
    <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> Position </th>
        <td mat-cell *matCellDef="let output"> {{ output.position}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="['position', 'name']"></tr>
    <tr mat-row *matRowDef="let row; columns: ['position', 'name'];"></tr>
<table>

https://stackblitz.com/edit/angular-pjyasx

垫表显示新数组

1 个答案: