有没有办法在材料角度选项卡中显示不同的表格？

Question

所以，我对 Angular 有点陌生，之前从未使用过 Angular-Material。因此，如果解决方案很简单，请放轻松。基本上，我正在尝试使用 Angular-Material 选项卡，在生成的每个选项卡下显示一个不同的表。该表从如下所示的内部数组中的 12 个字典中获取信息。

作为参考，我试图遍历的对象如下所示：

object= [
[ {}x12 ]
[ {}x12 ]]

该对象基本上表示通过第 1 年、第 2 年、第 3 年等的选项卡。x12 对象是该数组的每个月（内部数组的数量可以更改）。

我的 HTML 看起来像：

<mat-tab-group *ngIf="flag">
<mat-tab *ngFor="let res of result" label="Year {{obj[0].year}}">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
        <th>Head 6</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let res of result[0]">
        <td>{{ res.a }}</td>
        <td>{{ res.b | number:'1.2-2' }}</td>
        <td>{{ res.c | number:'1.2-2' }}</td>
        <td>{{ res.d | number:'1.2-2' }}</td>
        <td>{{ res.e | number:'1.2-2' }}</td>
        <td>{{ res.f |  number:'1.2-2' }}</td>
      </tr>
    </tbody>
  </table>
</mat-tab>

如果有帮助，我更改了标签的名称只是为了更清楚一点。标签部分似乎工作正常，如果有 5 个内部数组，它会从内部字典中获取第 1 年、第 2 年等。每个选项卡都会显示一个表格，但它只显示第一个内部数组 12 个月，这是有道理的，因为我用 ngfor 告诉它。但我似乎无法让数据以任何其他方式显示。

我认为 mat-tab 的 ngFor 必须表现不同，因为它再次从内部数组字典中获取正确的年份。

我尝试使用 Mat-Table 并不能让它按照我想要的方式工作，而且我个人还是喜欢标签的样式。

我愿意接受任何和所有帮助，包括如果有人认为我的对象设计不正确。

谢谢

Answer 1

我认为这段代码对你有帮助：

HTML：

<mat-tab-group>
 <mat-tab *ngFor="let res of result" label="{{res.first}} Year">
  <table class="table table-striped">
    <thead>
      <tr>
        <th *ngFor="let head of res.head">{{head.head}}</th>
      </tr>
    </thead>
    <tbody>
    <tr *ngFor="let head of res.body">
      <td *ngFor="let head of res.body">{{head.head}}</td>
    </tr>
    </tbody>
  </table> 
 </mat-tab>
</mat-tab-group>

TS：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   result = [
     {first: 'First', head: [{head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}],  body: [{head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'bodi1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}]}, 
     {first: 'Second' , head: [{head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}], body: [{head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'bodi1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}]}, 
     {first: 'Third', head: [{head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}], body: [{head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'bodi1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}]}, 
     {first: 'Fourth', head: [{head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}, {head: 'head'}], body: [{head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'bodi1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}, {head: 'body1'}]}
     ];
}

Answer 2

您可以将选项卡内容替换为任何组件：

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

这是一个演示应用，它为每个标签显示 mat-table：

https://stackblitz.com/angular/odvryxrnrna

Answer 3

所以我终于让它工作了，非常感谢 Abhishek。

所以我所做的就是将我的对象重新格式化为 result = [ { year: "", body: [{}x12] }]

我保留了 Abhishek 对象的头部部分，主要是因为标题将保持不变，所以我自己将其硬编码在表格的标题中。我将在下面发布表格html。

<mat-tab-group *ngIf="flag">
<mat-tab *ngFor="let res of result" label="Year {{res.year}}">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
                <th>Head 4</th>
                <th>Head 5</th>
                <th>Head 6</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let body of res.body">
                <td>{{body.a}}</td>
                <td>{{body.b | number:'1.2-2' }}</td>
                <td>{{body.c | number:'1.2-2' }}</td>
                <td>{{body.d | number:'1.2-2' }}</td>
                <td>{{body.e | number:'1.2-2' }}</td>
                <td>{{body.f | number:'1.2-2' }}</td>
            </tr>
        </tbody>
    </table>
</mat-tab>

谢谢