所以,我对Angular有点陌生,以前从未使用过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,但无法让它按照我想要的方式工作,而且我个人无论如何都喜欢标签的风格。
我愿意接受任何和所有的帮助,包括如果有人认为我设计了不正确的对象。
谢谢
我认为这段代码可以帮助您:
.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'}]}
];
}
您可以将选项卡内容替换为任何组件:
<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
所以我终于让它工作了,非常感谢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>
谢谢