문자열 값을 기준으로 각도로 테이블을 만드는 방법은 무엇입니까?

Question

각도 4/5를 사용 중이며 문자열 값을 기준으로 각도로 여러 테이블을 만들어야합니다. 다음은 테이블을 만들기 위해 만든 모델입니다.

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을 기반으로 만들어진다는 것입니다. 위 구조와 마찬가지로 배열의 처음 두 요소의 PropertyType은 동일합니다. 유형 1이므로 2 개의 테이블이 생성됩니다. 캡션/제목이있는 하나 : 유형 1 및 기타 캡션 : 유형 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를 추가하지 않은 : 당신은 아마

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

어딘가 그 안에

를 원한다. 이 노력이 옵션을 사용 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

먼저 list1 데이터를 더 멋진 형식으로 조작하고 싶습니다. 예 : .

export interface CustomTable { 
    header: string, 
    rows: Properties[] 
} 

const tables: CustomTable[] []; 

list1.forEach(family => { 
    // Check if this type is already in the table. 
    const myTable: CustomTable = tables.find(customTable => customTable.header === family.propertyType); 
    if (myTable) { 
    // If it is, then add a new row 
    myTable.rows.push(family.Properties); 
    } else { 
    // If not, create a new table 
    myTable.rows.push({ 
     header: family.propertyType, 
     rows: [family.Properties] 
    }); 
    } 
}); 

그런 다음 적절하게 html을 변경하십시오. 그 요구되지 않기 때문에

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