ngFor 중첩 루프를 사용하여 동적 열 헤더 및 값에 대한 HTML th 및 td 태그 구현

Question

동적 tr 및 td를 사용하여 HTML 테이블을 만들려고 합니다. HTML에 중첩 루프를 추가했는데 동적 열 헤더(th)가 제대로 작동하지만 값이 올바른 td에 추가되지 않습니다.

这是我拥有数据：

"최종 결과": [
        {
            "tableNamee": "테이블_1",
            "colCategories": [
                {
                    "columnnnn": "사용자",
                    "값": [
                        {
                            "값": "0"
                        },
                        {
                            "값": "10"
                        },
                        {
                            "값": "60"
                        },
                        {
                            "값": "0"
                        },
                        {
                            "값": "0"
                        },
                        {
                            "값": "0"
                        },
                        {
                            "값": "0"
                        },
                        {
                            "값": "0"
                        },
                        {
                            "값": "0"
                        }
                    ]
                },
                {
                    "columnnnn": "헤더1",
                    "값": [
                        {
                            "값": "460"
                        }
                    ]
                },
                {
                    "columnnnn": "금액",
                    "값": [
                        {
                            "값": "10"
                        },
                        {
                            "값": "100"
                        },
                        {
                            "값": "50"
                        }
                    ]
                }
            ]
        },
        {
            "tableNamee": "테이블_2",
            "colCategories": [
                {
                    "columnnnn": "사용자",
                    "값": [
                        {
                            "값": "07"
                        },
                        {
                            "값": "10"
                        }
                    ]
                },
                {
                    "columnnnn": "금액",
                    "값": [
                        {
                            "값": "70"
                        }
                    ]
                },
                {
                    "columnnnn": "사용자1",
                    "값": [
                        {
                            "값": "57"
                        }
                    ]
                },
                {
                    "columnnnn": "열",
                    "값": [
                        {
                            "값": "80"
                        }
                    ]
                },
                {
                    "columnnnn": "열2",
                    "값": [
                        {
                            "값": "10"
                        }
                    ]
                }
            ]
        }
    ]

以下是HTML代码：

    
 테이블 이름: {{j.tableNamee}} 
    
    
    

        <테이블 클래스="테이블 테이블 테두리">
            <본문>
                
                    <번째 클래스="" 범위="col" *ngFor="j.colCategories의 k를 설정하세요">
                        {{k.columnnnn}}
                    
                
                
                    
                        
                            

                                
                                    
 <스팬 제목="{{m.value}}"> {{m.value}} 
                                    
                                
                            
                        
                    
                
            
    
        
    
    

Answer 1

HTML 마크업이 <tr>包含一个包裹<td>的<div> 때문에 이상해 보입니다. 나는 이것이 당신의 문제를 일으키는 원인이라고 생각합니다.

해본 적은 없지만 <table> 태그를 다음과 같이 변경해 볼 수 있습니다.

으아악