Есть ли способ отображения разных таблиц во вкладках материал-угловой?

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.Но я не могу заставить данные отображаться каким-либо другим способом.

Я думаю, что ngFor для mat-tab должен вести себя по-другому, потому что снова он выбирает правильный год из словаря внутренних массивов.

Я попытался использовать 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

Итак, я наконец-то заставил его работать, большое спасибо Абхишеку.

Так что я сделал, что переформатировал мой объект, чтобы он стал result = [ { year: "", body: [{}x12] }]

Я не публиковал головную часть объекта Абхишека.Главным образом потому, что заголовки не изменятся, поэтому я сам жестко запрограммировал это в заголовке таблицы.Я опубликую таблицу 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>

Спасибо