Angular 7 : Eliminating indexing of column names in the UI

Question

我在 Angular 7 中实现了一个动态表。我垂直显示列标题和记录。如果您注意到列标题在组件中是硬编码的。我目前有大约 57 个正在渲染的列，我预见的问题是在服务器中引入新列或列的顺序发生变化时。当前的 UI 代码看起来非常依赖于索引，即魔术数字。有没有更好的方法来处理 UI 渲染。

界面

<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">
         <ng-container *ngFor="let s of data1;">
             <ng-container *ngIf="f.Id == s.LegalParentClassId">  
      <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>
     </ng-container> 
  </ng-container>

  </tr>
  </table>

组件

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

JSFiddle

https://jsfiddle.net/sm7fzjhq/3/

JSON

[{"LegalFundClassCommercialViewModel":{"Description":"Class B","AuditSummary":"skeeling Jun 11, 2018","FeesReviewSummary":"","TermsReviewSummary":"","Id":11166,"FundId":5508,"FundClassType":1,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":"","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,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":null},{"LegalFundClassCommercialViewModel":{"Description":"Class A","AuditSummary":"skeeling Jun 11, 2018","FeesReviewSummary":"","TermsReviewSummary":"","Id":11167,"FundId":5508,"FundClassType":1,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":"","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,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":null},{"LegalFundClassCommercialViewModel":{"Description":"Class A","AuditSummary":"rmenon Jun 04, 2019","FeesReviewSummary":"dmukerji May 28, 2019","TermsReviewSummary":"kweigand Jan 16, 2019","Id":13713,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":"10,19,7","ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":2,"SubVotingName":"Yes","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,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":{"Description":"Class A","AuditSummary":"rmenon Jun 05, 2019","FeesReviewSummary":"dmukerji May 28, 2019","TermsReviewSummary":"kweigand Jan 16, 2019","Id":28444,"FundId":237146,"FundClassType":4,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":"10,19,7","ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":2,"SubVotingName":"Yes","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,"LegalParentClassId":13713}},{"LegalFundClassCommercialViewModel":{"Description":"Class D","AuditSummary":" ","FeesReviewSummary":"","TermsReviewSummary":"","Id":13714,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":"","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,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":null},{"LegalFundClassCommercialViewModel":{"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":"","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,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":null},{"LegalFundClassCommercialViewModel":{"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":"","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,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":null},{"LegalFundClassCommercialViewModel":{"Description":"Class B","AuditSummary":"rmenon Jun 04, 2019","FeesReviewSummary":"dmukerji May 28, 2019","TermsReviewSummary":"rmenon Jun 04, 2019","Id":13717,"FundId":237146,"FundClassType":3,"CurrencyId":null,"PrimaryCurrencyName":null,"OtherCurrencyName":"","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,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":null},{"LegalFundClassCommercialViewModel":{"Description":"TestRanjit100","AuditSummary":"rmenon Jun 04, 2019","FeesReviewSummary":"","TermsReviewSummary":"","Id":28424,"FundId":237146,"FundClassType":3,"CurrencyId":2,"PrimaryCurrencyName":"USD","OtherCurrencyName":"","ManagerStrategyId":null,"ManagerStrategyName":null,"SubVotingId":null,"SubVotingName":null,"SubHotIssueId":null,"SubHotIssueName":null,"RedsFrqncyId":null,"RedsFrqncyName":null,"RedsNoticeDays":null,"NoticeTypeOfDaysId":null,"NoticeTypeOfDaysName":null,"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":null,"LegalParentClassId":null},"LegalFundClassSideLetterViewModel":null}]

服务器端列名

Dictionary<string, string> legalFundClassColumnNames = new Dictionary<string, string>()
            {
                {"Legal Class Name", "Description"},
                {"Last Edited", "AuditSummary"},
                {"Legal Class ID", "Id"}
            };

标记

  <div *ngIf="LegalFundClasses && LegalFundClasses.AllTerms && LegalFundClasses.LegalFundClassColumnNames">
        <table class="fundClassesTable table-striped">
            <tr *ngFor="let c of LegalFundClasses.LegalFundClassColumnNames | keyvalue">
                    <th> {{ c.key  }}</th>

                    <ng-container *ngFor="let f of LegalFundClasses.AllTerms; let i=index;">
                        <td class="tableItem"> {{f.LegalFundClassCommercialViewModel[c.value] }}</td>
                            <td class="tableItem">
                            <div *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id]">
                                <button type="button" class="btn btn-default btn" style="float: left;"
                                    (click)="reviewClicked(f.LegalFundClassCommercialViewModel.Id,1)">Review
                                    Terms</button>
                                {{f.LegalFundClassCommercialViewModel[c.value]}}
                            </div>
                        </td> 



                         <td colspan=i class="tableItem"  *ngIf="i<1"></td>

                          <td *ngIf="!EditMode[f.LegalFundClassCommercialViewModel.Id]" class="tableItem">
                            {{f.LegalFundClassCommercialViewModel[c.value]}}
                        </td>
                        <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] " class="tableItem">
                            <kendo-dropdownlist style="height: 29.5px;"
                                [(ngModel)]="f.LegalFundClassCommercialViewModel.CurrencyId" [defaultItem]="defaultItem"
                                class="form-control  form-control-sm" [data]="LegalFundClasses.Currencies"
                                [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
                            </kendo-dropdownlist>
                        </td>

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

    </div>
</div>

Answer 1

似乎使用更好的列模型会更好，例如:

public ColumnNames: {header:string, prop:string}[] = [ 
                                   {header: 'Legal Class Name', prop: 'Description'},
                                   {header: 'Last Edited', prop: 'AuditSummary'},
                                   {header: 'Legal Class ID', prop: 'Id'}];

然后你可以在你的表格中使用改进的模型来动态显示数据:

<tr *ngFor="let c of ColumnNames">
    <th class="tableItem bold">{{ c.header }}</th>
    <ng-container *ngFor="let f of data">
      <td class="tableItem" >{{f[c.prop]}}</td>       
    </ng-container>
</tr>

现在，如果您的数据发生变化，您至少是在使用 typescript 代码而不是 html 模板。您甚至可以将此列定义存储在您的服务器上并更新它，而无需重新部署/修改您的前端代码。

理论上，您可以扩展此模型以包括其他内容，例如类、要显示的单元格模板，或其他内容(例如排序键、宽度定义等)。尽情发挥您的想象力吧。

这是一个工作 fiddle :

https://jsfiddle.net/o6y49v25/