我有一个表组件，它有两个数据结构，我需要从其中创建一个HTML表，一个用于表模式（paymentTableMetadata），一个用于表的行和单元格的数据（paymentTableData）。
当我用HTML编写表格时，表格数据与表格标题没有关联：
这是我组件。ts：

import { Component, OnInit } from '@angular/core';

import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { PaymentTableService } from 'src/app/services/payment-table-service/payment-table-service';
@Component({
  selector: 'payment-table',
  templateUrl: './payment-table.component.html',
  styleUrls: ['./payment-table.component.scss']
})
export class PaymentTableComponent implements OnInit {
  

  paymentTableMetadata = [
    {
        "cntrlFldCode": "Curr",
        "cntrlFldLabel": "Currency",
        "fieldDataType": "StringType",
        "cntrlFldTypeEnum": "InputField"
    },
    {
        "cntrlFldCode": "Amount",
        "cntrlFldLabel": "Amount",
        "fieldDataType": "DecimalType",
        "cntrlFldTypeEnum": "InputField"
    },
    {
        "cntrlFldCode": "Output",
        "cntrlFldLabel": "Result",
        "fieldDataType": "StringType",
        "cntrlFldTypeEnum": "OutputField"
    }
]



paymentTableData = {
    "dmnCode": "001",
    "dmnDsc": "Payment Amount Control",
    "dmnRows": [
        {
            "rowCode": "1",
            "rowDsc": "USD Amount <10,00",
            "rowOrder": 1,
            "processKey": "LowPaymentBpm",
            "outputValue": null,
            "cells": [
                {
                    "cellCode": "amt",
                    "cntrlFldCode": "Amount",
                    "cntrlFldLabel": "Amount",
                    "fieldDataType": "DecimalType",
                    "cntrlFldTypeEnum": "InputField",
                    "operatorEnum": "LessThanEqual",
                    "dateTypeEnum": null,
                    "value1TypeEnum": null,
                    "value1": "10000",
                    "value1Set": null,
                    "value1Offset": null,
                    "value2TypeEnum": null,
                    "value2": null,
                    "value2Set": null,
                    "value2Offset": null,
                    "errors": null
                },
                {
                    "cellCode": "curr",
                    "cntrlFldCode": "Curr",
                    "cntrlFldLabel": "Currency",
                    "fieldDataType": "StringType",
                    "cntrlFldTypeEnum": "InputField",
                    "operatorEnum": "Equals",
                    "dateTypeEnum": null,
                    "value1TypeEnum": null,
                    "value1": "USD",
                    "value1Set": null,
                    "value1Offset": null,
                    "value2TypeEnum": null,
                    "value2": null,
                    "value2Set": null,
                    "value2Offset": null,
                    "errors": null
                }
            ]
        }
    ],
    "errors": null
}
  constructor(private paymentTableService : PaymentTableService) {

   
    
   }

   onDrop(event: CdkDragDrop<string[]>) {
    this.paymentTableService.paymentTableMetadata
  }
 

  
  ngOnInit() {
   
  }

  
}

下面是我的component.html：

<table class="table table-striped table-no-bordered table-hover my-table" >
    <thead>
        <tr *ngIf="this.paymentTableMetadata">
            <th *ngFor = "let paymentCell of this.paymentTableMetadata"> <span class="table-header">{{paymentCell.cntrlFldLabel}}</span> </th>
            <th > <span class="table-header">Process Key</span> </th>  
           
          </tr>
    </thead>
    <tbody cdkDropList (cdkDropListDropped)="this.onDrop($event)" id="dataTable" >
        <ng-container  *ngIf="this.paymentTableData.dmnRows.length >0 ; else empty">
            <tr cdkDrag cdkDragLockAxis="y" *ngFor="let tableRow of this.paymentTableData.dmnRows" id="{{ tableRow.rowCode }}"
               >
              
                <td *ngFor = "let cell of tableRow.cells">{{cell.value1}}</td>
                <td >{{tableRow.processKey}}</td>
               
            
            </tr>
        </ng-container> 
         <ng-template #empty>
            <p class="no-data"> No Data In Table</p>
        </ng-template>

    </tbody>
  
</table>

当我运行此组件时，货币值1出现在标题金额下，沿着出现其他问题（结果列应为空，进程键的值应为LowPaymentBPM），屏幕截图如下：

我们欢迎你提出任何处理这一问题的意见。