Angular material 是否有一种方法可以在“材质角度”选项卡中显示不同的表格?
所以,我对棱角材料有点陌生,以前从未使用过棱角材料。因此,如果解决方案很简单,请对我放松。基本上,我想做的是,使用“角度材质”选项卡,在生成的每个选项卡下显示一个不同的表。该表从如下所示的内部数组中的12个字典中获取信息 作为参考,我尝试穿过的对象如下所示:Angular material 是否有一种方法可以在“材质角度”选项卡中显示不同的表格?,angular-material,angular7,Angular Material,Angular7,所以,我对棱角材料有点陌生,以前从未使用过棱角材料。因此,如果解决方案很简单,请对我放松。基本上,我想做的是,使用“角度材质”选项卡,在生成的每个选项卡下显示一个不同的表。该表从如下所示的内部数组中的12个字典中获取信息 作为参考,我尝试穿过的对象如下所示: object= [ [ {}x12 ] [ {}x12 ]] 该对象基本上表示通过第1年、第2年、第3年等的选项卡。x12对象用于该阵列的每个月(内部阵列的数量可以更改) 我的HTML看起来像: <mat-tab-group *ng
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>
总目1
总目2
总目3
总目4
总目5
总目6
{{res.a}}
{res.b|编号:'1.2-2'}
{res.c|number:'1.2-2'}
{res.d|number:'1.2-2'}
{{res.e |编号:'1.2-2'}}
{res.f|number:'1.2-2'}
如果有帮助的话,我只是为了更清楚一点而更改了标签的名称。标签部分似乎工作正常,如果有5个内部数组,它将从内部字典中获得第1年、第2年等。每个选项卡将显示一个表,但它只显示12个月前的第一个内部数组,这是有意义的,因为我告诉它使用ngfor。但我似乎无法以任何其他方式显示数据
我认为ngFor for mat选项卡的行为必须有所不同,因为它再次从内部数组字典中获取正确的年份
我试着使用Mat Table,但无法按照我想要的方式工作,而且我个人还是喜欢标签的样式
我愿意接受任何和所有帮助,包括如果有人认为我设计的对象不正确
谢谢您可以用任何组件替换选项卡内容:
<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>
内容1
内容2
内容3
下面是一个演示应用程序,为每个选项卡显示mat table
:
我认为这段代码可以帮助您: HTML:
所以我终于让它工作起来了,非常感谢阿披舍克 因此,我所做的是将我的对象重新格式化为
结果=[
{
年份:“,
正文:[{}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>
总目1
总目2
总目3
总目4
总目5
总目6
{{body.a}}
{{body.b}编号:'1.2-2'}
{{body.c}编号:'1.2-2'}
{{body.d|number:'1.2-2'}}
{{body.e}编号:'1.2-2'}
{{body.f|number:'1.2-2'}
谢谢Hi Umut,我尽量避免在eac选项卡下手动输入代码,因为选项卡的数量可能会根据用户输入的内容而变化。谢谢看这个链接,我想它对你有帮助
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 *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>