ですから、私は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を使ってみましたが、思い通りに動かせませんでした。それに、とにかくタブのスタイルが個人的に好きです。
私は、オブジェクトを間違って設計していると誰かが思った場合を含め、あらゆる助けを受け入れます。
ありがとうございました
私はこのコードがあなたを助けると思います：
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'}]}
];
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加