文字列値に基づいてAngularで表を作成する方法は？

Question

私は角度4/5を使用しています。文字列値に基づいてAngularでいくつかのテーブルを作成する必要があります。ここで私がテーブルを作成するために作ったモデルがあります。

class NameValuePair { 
    Name: string; 
    Value: string; 
} 

export class Family { 
    Properties: Array<NameValuePair>; 
    PropertyType: string; 
} 

以下に、テーブルに含まれるハードコードされた値を示します。

export const list1: Family[] = 
[ 
    { 
     Properties: [ 
     { 
      Name: "A", 
      Value: "1" 
     }, 

     { 
      Name: "B", 
      Value: "2" 
     }, 
     { 
      Name: "C", 
      Value: "3" 
     } 
     ], 
     PropertyType: "Type 1" 
    }, 
    { 
     Properties: [ 
     { 
      Name: "A", 
      Value: "10" 
     }, 

     { 
      Name: "B", 
      Value: "20" 
     }, 
     { 
      Name: "C", 
      Value: "30" 
     } 
     ], 
     PropertyType: "Type 1" 
    }, 
    { 
     Properties: [ 
     { 
      Name: "A", 
      Value: "100" 
     }, 

     { 
      Name: "B", 
      Value: "200" 
     }, 
     { 
      Name: "C", 
      Value: "300" 
     } 
     ], 
     PropertyType: "Type 2" 
    } 
    ] 

ここで注目すべきは、テーブルがPropertyTypeに基づいて作成されることです。上記の構造の場合と同様に、配列の最初の2つの要素のPropertyTypeは同じタイプ1なので、2つのテーブルが作成されます。 1つはキャプション/見出し：タイプ1とキャプション：タイプ2のものです。 2番目の配列要素のプロパティ[]配列は、最初のテーブルの2番目の行になります。私はこのPropertyType文字列値に基づいてテーブルを作成する方法についての論理を見つけることができません。しかし、それは私がcomponent.htmlファイルに書いたものですが、このロジックは間違っています。上述したように、ここで

<div class="container pt-4" *ngFor="let element of list;let i = index"> 
    <ng-container *ngIf="list[i].PropertyType == list[i+1].PropertyType"> 
    <div style="padding-left:250px;font-size: 20px" class="pb-2">{{element.PropertyType}}</div> 

    <table id="{{element.PropertyType}}" class="table table-striped table-bordered table-responsive pb-3 mx-auto"> 
     <thead style="height:40px"> 
     <tr align="center"> 
      <th *ngFor="let property of element.Properties" style="font-size: 20px">{{property.Name}}</th> 
     </tr> 
     </thead> 

     <ng-container *ngFor="let element1 of list"> 
      <tr align="center" *ngIf="element.PropertyType == element1.PropertyType"> 
      <td *ngFor="let property of element1.Properties; let propertyIndex = index" style="width: 200px"> 
       <ng-container [ngSwitch]="propertyIndex">   
       <div *ngSwitchDefault style="font-size: 20px">{{property.Value}}</div> 
       </ng-container> 
      </td> 
      </tr> 
     </ng-container> 
    </table> 
    </ng-container> 
</div> 

リストは、LIST1のCONST配列を指します。助けてください。

Answer 1

これは完全なロジックであることが求められていないので、私は、CSSを追加しませんでした。それが働いている、これを使用しhttps://stackblitz.com/edit/angular-hd9jey

import { 
 
    Component 
 
} from '@angular/core'; 
 
import { 
 
    list1 
 
} from './list1'; 
 
@Component({ 
 
    selector: 'my-app', 
 
    templateUrl: './app.component.html', 
 

 
}) 
 
export class AppComponent { 
 
    tableArray = []; 
 
    constructor() { 
 
    let tableObject = {}; 
 
    list1.forEach(i => { 
 
     if (tableObject[i.PropertyType]) { 
 
     tableObject[i.PropertyType].push(i); 
 
     } else { 
 
     tableObject[i.PropertyType] = [i]; 
 
     } 
 
     this.tableArray = Object.entries(tableObject); 
 
    }); 
 
    } 
 

 
}

<div class="container pt-4" *ngFor="let table of tableArray;index as i"> 
 

 
    <div style="padding-left:250px;font-size: 20px" class="pb-2">{{table[0]}}</div> 
 
    <table id="{{table[0]}}" class="table table-striped table-bordered table-responsive pb-3 mx-auto"> 
 
    <thead style="height:40px"> 
 
     <tr align="center"> 
 
     <th *ngFor="let property of table[1][0].Properties" style="font-size: 20px"> 
 
      {{property.Name}}</th> 
 
     </tr> 
 
    </thead> 
 

 

 
    <tr *ngFor="let property of table[1];" align="center"> 
 
     <td *ngFor="let va of property.Properties"> 
 
     {{va.Value}} 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 
</div>

Answer 2

まず、リスト1のデータをより整理したフォーマットに変更したい：

それに応じてHTMLを変更します。あなたはおそらく

<ng-container ngFor="let table of tables"> 

、その内のどこかにしたい：

<tr *ngFor=let row of tables.rows>