根据Angular中的给定结构动态生成表

Question

我通过遍历记录生成了角度为7的下表，我需要输出看起来像截图中的一样，但是表的结构应该像我在下面的帖子中提到的那样

JSON

[{"Description":"Class B","AuditSummary":"rmenon May 22, 2019","FeesReviewSummary":"","TermsReviewSummary":"","Id":11166,"FundId":5508,"FundClassType":1,"CurrencyId":5,"PrimaryCurrencyName":"CHF","OtherCurrencyName":null,"ManagerStrategyId":5508,"ManagerStrategyName":"Sylebra ","SubVotingId":2,"SubVotingName":"Yes","SubHotIssueId":3,"SubHotIssueName":"All Capital","RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":50,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":3,"LockupTypeName":"Soft","HardDurationMonthsId":8,"HardDurationMonthsName":"36","SoftDurationMonthsId":6,"SoftDurationMonthsName":"18","LockupFees0To12Pct":4,"LockupFees12To24Pct":5,"LockupFees24To36Pct":5,"WebfolioRedsFee":"12000","LockupComments":"Test by Ranjit","ApplyGateDecliningBalance":true,"GateInvestorPct":2,"GateSourceId":1,"GateSourceName":"Fund Gate","GateFundClassPct":2,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":1,"PaymentTypeOfDaysName":"Business","HoldbackPercentage":2,"HoldbackPayment":100,"HoldbackTypeOfDaysId":1,"HoldbackTypeOfDaysName":"Business","ManagementFeeRate":15,"IncentiveFeeRate":15,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":true,"HurdleRateBasisId":1,"HurdleRateBasisName":" Fixed %","HurdleRatePct":2,"HurdleRateIndexId":1,"HurdleRateIndexName":null,"PreferredReturnRatePct":2,"GpCatchUp":"Test by Ranjit","PreferredReturnComments":"Test by Ranjit","Clawback":true,"ClawbackPercentage":2,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"Test by Ranjit","FeeReductionsNegotiated":true,"InvestmentStatusId":1},{"Description":"Class A","AuditSummary":"skeeling Jun 11, 2018","FeesReviewSummary":"","TermsReviewSummary":"","Id":11167,"FundId":5508,"FundClassType":1,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":45,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":null,"LockupTypeName":null,"HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":3,"LockupFees12To24Pct":null,"LockupFees24To36Pct":null,"WebfolioRedsFee":"12 M,0.03|","LockupComments":null,"ApplyGateDecliningBalance":false,"GateInvestorPct":null,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":null,"IntialProceeds":null,"PaymentInDays":null,"PaymentTypeOfDaysId":null,"PaymentTypeOfDaysName":null,"HoldbackPercentage":null,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":null,"IncentiveFeeRate":null,"RealizationFrequencyId":null,"RealizationFrequencyName":null,"HighWaterMarkId":null,"HighWaterMarkName":null,"HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":null,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":null,"AssetFeeDiscountTypeName":null,"FeeComments":null,"FeeReductionsNegotiated":null,"InvestmentStatusId":0},{"Description":"Class D","AuditSummary":" ","FeesReviewSummary":"","TermsReviewSummary":"","Id":13714,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":45,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":null,"LockupTypeName":null,"HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":null,"LockupFees12To24Pct":null,"LockupFees24To36Pct":null,"WebfolioRedsFee":null,"LockupComments":null,"ApplyGateDecliningBalance":false,"GateInvestorPct":null,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":null,"IntialProceeds":null,"PaymentInDays":null,"PaymentTypeOfDaysId":null,"PaymentTypeOfDaysName":null,"HoldbackPercentage":null,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":null,"IncentiveFeeRate":null,"RealizationFrequencyId":null,"RealizationFrequencyName":null,"HighWaterMarkId":null,"HighWaterMarkName":null,"HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":null,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":null,"AssetFeeDiscountTypeName":null,"FeeComments":null,"FeeReductionsNegotiated":null,"InvestmentStatusId":0},{"Description":"Class B","AuditSummary":"dmukerji Mar 11, 2019","FeesReviewSummary":"dmukerji Mar 11, 2019","TermsReviewSummary":"kweigand Jan 16, 2019","Id":13717,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":1},{"Description":"Class A","AuditSummary":"dmukerji Mar 11, 2019","FeesReviewSummary":"dmukerji Mar 11, 2019","TermsReviewSummary":"kweigand Jan 16, 2019","Id":13713,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":1},{"Description":"Class B1","AuditSummary":"kweigand Feb 19, 2019","FeesReviewSummary":"kweigand Feb 19, 2019","TermsReviewSummary":"fblack Nov 21, 2018","Id":13716,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":22,"SoftDurationMonthsName":"72","LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":0},{"Description":"Class C","AuditSummary":"kweigand Feb 19, 2019","FeesReviewSummary":"kweigand Feb 19, 2019","TermsReviewSummary":"fblack Nov 21, 2018","Id":13715,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":null,"ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":5,"RedsFrqncyName":"Quarterly","RedsNoticeDays":46,"NoticeTypeOfDaysId":2,"NoticeTypeOfDaysName":"Calendar","LockupTypeId":5,"LockupTypeName":"No Lock","HardDurationMonthsId":null,"HardDurationMonthsName":null,"SoftDurationMonthsId":null,"SoftDurationMonthsName":null,"LockupFees0To12Pct":0,"LockupFees12To24Pct":0,"LockupFees24To36Pct":0,"WebfolioRedsFee":null,"LockupComments":"In the SOT, there is a 1-year lock, this is no longer applicable and was only applicable for the original transfer from Sylebra commingled.","ApplyGateDecliningBalance":false,"GateInvestorPct":0,"GateSourceId":null,"GateSourceName":null,"GateFundClassPct":0,"IntialProceeds":100,"PaymentInDays":30,"PaymentTypeOfDaysId":2,"PaymentTypeOfDaysName":"Calendar","HoldbackPercentage":0,"HoldbackPayment":null,"HoldbackTypeOfDaysId":null,"HoldbackTypeOfDaysName":null,"ManagementFeeRate":0,"IncentiveFeeRate":30,"RealizationFrequencyId":7,"RealizationFrequencyName":"Yearly","HighWaterMarkId":1,"HighWaterMarkName":"Standard","HurdleRate":false,"HurdleRateBasisId":null,"HurdleRateBasisName":null,"HurdleRatePct":null,"HurdleRateIndexId":null,"HurdleRateIndexName":null,"PreferredReturnRatePct":0,"GpCatchUp":null,"PreferredReturnComments":null,"Clawback":false,"ClawbackPercentage":null,"AssetFeeDiscountTypeId":1,"AssetFeeDiscountTypeName":"Management Fee","FeeComments":"New fees effective 1/1/2019 \n\nManagement fee is an Asset Based fee of the lesser of $1M or 1.5% of NAV.  This is a payment in advance of any performance fee, making the management fee effectively zero.\n\nIncentive fee is 30% on first 15% of performance, 35% thereafter.\n\nAudit holdbacks should be zero unless the vehicle is in liquidation, in which case it's typically a 5% holdback paid once the audit is completed where applicable or 2-3 months after the final NAV once all the expenses have been paid.","FeeReductionsNegotiated":null,"InvestmentStatusId":0}]

屏幕截图

当前HTML

<tr>
            <th class="tableItem bold">Legal Class Name</th>
            <th class="tableItem bold">Last Edited</th>
            <th class="tableItem bold">Legal Class ID</th>
            <th class="tableItem bold"></th>
            <th class="tableItem bold">TERMS</th>
            <th class="tableItem bold">SUBSCRIPTIONS</th>
            <th class="tableItem bold">Primary Currency</th>

        </tr>



        <ng-container>
            <!-- <tr *ngFor="let f of fundClass['LegalFundClassDetailsViewModel'] | keyvalue"> -->
            <tr *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel">
                <td class="tableItem">{{f.Description}}</td>
                <td class="tableItem"></td>
                <td class="tableItem">{{f.Id}}</td>
                <td class="tableItem"></td>
                <td class="tableItem"></td>
                <td colspan="5" class="tableItem"></td>
                <td class="tableItem"> 
                    <kendo-dropdownlist style="width:100%" [(ngModel)]="f.CurrencyId"
                     class="form-control  form-control-sm" [data]="Currencies"
                     [filterable]="false" textField="CURRENCY_NAME" [valuePrimitive]="true" valueField="CURRENCY_ID">
                  </kendo-dropdownlist>
               </td>

            </tr>
        </ng-container>
    </table>

我需要使用以下格式生成表，但要使用循环。下面是我要寻找的结构。我该怎么办？

建议的html

table {
  border-collapse: collapse;
  width: 100%;
}

table, td {
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}

th {
  border: 1px solid black;
  text-align: left;
  padding: 5px;
}

tr:hover {background-color: #EFF3FB;}

td:nth-child(odd) {background-color: #E7EFFE;}
    <table style="border-style: solid; border-width: 1px; padding: 25px;">

    <tr>
    <th class="tableItem bold">Legal Class Name</th>
    <td class="tableItem">Class B</td>
    <td class="tableItem">Class A</td>
    <td class="tableItem">Class D</td>
    <td class="tableItem">Class B</td>
    <td class="tableItem">Class A</td>
    <td class="tableItem">Class B1</td>
    <td class="tableItem">Class C</td>
    </tr>

    <tr>
    <th class="tableItem bold">Last edited</th>
    <td class="tableItem"></td>
    <td class="tableItem"></td>
    <td class="tableItem"></td>
    <td class="tableItem"></td>
    <td class="tableItem"></td>
    <td class="tableItem"></td>
    <td class="tableItem"></td>
    </tr>

    <tr>
    <th class="tableItem bold">Legal class ID</th>
    <td class="tableItem">11166</td>
    <td class="tableItem">11167</td>
    <td class="tableItem">13714</td>
    <td class="tableItem">13717</td>
    <td class="tableItem">13713</td>
    <td class="tableItem">13716</td>
    <td class="tableItem">13715</td>
    </tr>

    <tr>
    <th class="tableItem bold">Subscription</th>
    <td colspan = "7"> </td>
    </tr>

    </table>

我已经尝试过类似的操作，但这不是我想要的输出

 public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal Class ID'];

     <div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">


            <table class="fundClassesTable table-striped">
                    <ng-container>
                <tr *ngFor="let c of ColumnNames">
                    <th class="tableItem bold">{{ c }}</th>


                <div *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel">

                        <td class="tableItem">{{f.Description}}</td>
                        <td class="tableItem">{{f.AuditSummary}}</td>
                        <td class="tableItem">{{f.Id}}</td>

                </div>

               </tr>
            </ng-container>
            </table>


            </div>

Answer 1

您可以执行类似fiddle

的操作

<table class="fundClassesTable table-striped" border="1">
      <tr *ngFor="let c of ColumnNames">
        <th class="tableItem bold">{{ c }}</th>
        <ng-container *ngFor="let f of data">
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
        </ng-container>
      </tr>
      </table>