マルチレベルのグループ化でHTMLテーブルにデータを表示する
開発者
rowspanを使用してグループ化することにより、HTMLテーブルにいくつかのデータを表示する必要があります。以下は予想されるGUIです
私は以下のようなJSONデータを持っています。ここにJSONデータ
角度コード
<table class="table table-fixed" border="1">
<thead>
<tr>
<th>Country</th>
<th>State</th>
<th>City</th>
<th>Street</th>
<th>Male</th>
<th>Female</th>
<th>Others</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let country of Countries">
<tr *ngFor="let item of [].constructor(country.NoOfStreets); let streetIdx = index">
<ng-container *ngFor="let state of country.States; let stateIdx = index">
<td [attr.rowspan]="state.NoOfStreets" style="width: 15%">
{{state.StateName}}
</td>
</ng-container>
<ng-container *ngFor="let state of country.States; let stateIdx = index">
<ng-container *ngFor="let city of state.Cities; let cityIdx = index">
<td [attr.rowspan]="city.NoOfStreets" style="width: 15%">{{city.CityName}}</td>
<ng-container *ngFor="let street of city.Streets; let streetIdx = index">
<td style="width: 15%">{{street.StreetName}}</td>
<td style="width: 15%">{{street.Male}}</td>
<td style="width: 15%">{{street.Female}}</td>
<td style="width: 15%">{{street.Others}}</td>
</ng-container>
</ng-container>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
期待されるUIを生成できませんでした。別のUIが表示され、正しくレンダリングされません。私はこれをほぼ一週間試しましたが、何もうまくいきませんでした。
PLUNKのバージョンはhttps://next.plnkr.co/edit/5nYNZ86BiWDke3GE?open=lib%2Fapp.ts&deferRun=1です。
アレクサンドルミハルシウク
あなたが望むのは、すべてのストリートを平らにして配列にまとめ、それをループするようにすることです。フラットコードは次のようになります。
const concat = (x,y) => x.concat(y)
const flatMap = (f,xs) => xs.map(f).reduce(concat, [])
let states = flatMap(c => c.States.map(s => ({Country:c, State: s})), this.Countries);
let cities = flatMap(c => c.State.Cities.map(s => ({Country:c.Country, State:c.State, City: s})), states);
this.streets = flatMap(c => c.City.Streets.map(str => ({Country:c.Country, State:c.State, City: c.City, Street: str})), cities);
そして、各国、州、市が次のようなグループの最初であるかどうかを簡単に確認できます。
<tbody>
<tr *ngFor="let str in streets">
<td *ngIf="firstCountryInGroup(str)" [rowspan]="numberOfCountry(str)">
{{str.Country.CountryName}}
</td>
<td *ngIf="firstStateInGroup(str)" [rowspan]="numberOfStatse(str)">
{{str.State.CityName}}
</td>
<td *ngIf="firstCityInGroup(str)" [rowspan]="numberOfCities(str)">
{{str.City.CityName}}
</td>
<td>{{str.Street.Name}}<td>
<td>{{str.Street.Male}}<td>
<td>{{str.Street.Female}}<td>
<td>{{str.StreetOthers}}<td>
</tr>
</tbody>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
TOP 一覧
- 1
セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか？
- 2
Modbus Python Schneider PM5300
- 3
Ansibleで複数行のシェルスクリプトを実行する方法
- 4
tkinterウィンドウを閉じてもPythonプログラムが終了しない
- 5
どのように関係なく、それがどのように「悪い」、すべてのSSL証明書でのHttpClientを使用しないように
- 6
インデックス作成時のドキュメントの順序は、Elasticsearchの検索パフォーマンスを向上させますか？
- 7
ラベルとエントリがpythontkinterに表示されないのはなぜですか？
- 8
Chromeウェブアプリのウェブビューの高さの問題
- 9
パンダは異なる名前の列に追加します
- 10
GoDaddyでのCKEditorとKCfinderの画像プレビュー
- 11
Elasticsearch - あいまい検索は、提案を与えていません
- 12
変数値を含むElasticSearch検索結果
- 13
グラフ（.PNG）ファイルをエクスポートするZabbix
- 14
Elasticsearchの場合、間隔を空けた単語を使用したワイルドカード検索
- 15
モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます
- 16
mutate_allとifelseを組み合わせるにはどうすればよいですか
- 17
Windows 10 Pro 1709を1803、1809、または1903に更新しますか？
- 18
Elasticsearchでサーバー操作を最適化：低いディスク透かしに対処する
- 19
テキストフィールドの値に基づいて UIslider を移動します
- 20
ネットワークグラフで、ネットワークコンポーネントにカーソルを合わせたときに、それらを強調表示するにはどうすればよいですか？
- 21
Unity：未知のスクリプトをGameObject（カスタムエディター）に動的にアタッチする方法
コメントを追加