我基本上是试图遍历两个有角度的对象并显示两个相关的数据。记录与LegalParentClassId相关。
So for e.g Consider you have three records
Id Name
23456 Test
Id Name
23457 Test1
Id Name LegalParentClassId
23458 Test2 23456
然后应按以下顺序在UI中渲染
23456, 23458, 23457
JSFiddle
https://jsfiddle.net/b69dphxr/
我面临的问题是它正在显示第二个对象的匹配记录
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>
实际标记
<div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassCommercialViewModel && ColumnNames">
<table class="fundClassesTable table-striped">
<tr *ngFor="let c of ColumnNames">
<ng-container *ngIf="c != ColumnNames[45] && c != ColumnNames[46] && c != ColumnNames[47] || isHurdle;">
<th
[ngClass]="c != ColumnNames[56] && c != ColumnNames[57] && c != ColumnNames[38]? 'tableItem bold' : 'tableItem cellbgcolor'">
{{ c }}</th>
<ng-container *ngFor="let f of LegalFundClasses.LegalFundClassCommercialViewModel; let i=index">
<!-- <ng-container *ngFor="let s of LegalFundClasses.LegalFundClassSideLetterViewModel;" *ngIf="f.Id == s.LegalParentClassId"> -->
<!-- <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>
<td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
<td class="tableItem" *ngIf="c == ColumnNames[4]">
<div *ngIf="EditMode[f.Id]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.Id,1)">Review Terms</button>
<!-- <input kendoTextBox [(ngModel)]="f.AuditSummary" style="width: 100%; height: 29.5px;" />
<input kendoTextBox [(ngModel)]="f.AuditSummary" style="width: 100%; height: 29.5px;" /> -->
{{f.AuditSummary}}
</div>
</td>
<td colspan=i class="tableItem" *ngIf="c == ColumnNames[5] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[6]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.CurrencyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.Currencies" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[7]" class="tableItem"> {{f.ManagerStrategyName}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[7]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.ManagerStrategyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.ManagerStrategies" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[8]" class="tableItem"> {{f.OtherCurrencyName}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[8]" class="tableItem">
<kendo-multiselect [data]="LegalFundClasses.Currencies" style="height: 29.5px;"
[(ngModel)]="f.OtherCurrencyName" [textField]="'Name'" [valueField]="'Id'"
[autoClose]="false">
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<input type="checkbox" class="k-checkbox" [checked]="isItemSelected(dataItem.Name)">
<label class="k-checkbox-label">{{ dataItem.Name }}</label>
</ng-template>
</kendo-multiselect>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[9]" class="tableItem"> {{f.SubVotingName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[9]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.SubVotingId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqVoting" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[10]" class="tableItem"> {{f.SubHotIssueName}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[10]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.SubHotIssueId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHotIssue" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan=i class="tableItem" *ngIf="c == ColumnNames[11] && i<1"> </td>
<td colspan=i class="tableItem" *ngIf="c == ColumnNames[12] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[13]" class="tableItem">{{f.RedsFrqncyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[13]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.RedsFrqncyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqRedsFrequency" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[14]" class="tableItem">{{f.RedsNoticeDays}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[14]" class="tableItem" >
<!-- <input kendoTextBox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;" > -->
<kendo-numerictextbox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;">
</kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[15]" class="tableItem">{{f.NoticeTypeOfDaysName}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[15]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.NoticeTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan=i class="tableItem" *ngIf="c == ColumnNames[16] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[17]" class="tableItem">{{f.LockupTypeName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[17]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.LockupTypeId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqLockupType" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[18]" class="tableItem">
{{f.HardDurationMonthsName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[18]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;"
[(ngModel)]="f.HardDurationMonthsId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqDurationMonths"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[19]" class="tableItem">
{{f.SoftDurationMonthsName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[19]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;"
[(ngModel)]="f.SoftDurationMonthsId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqDurationMonths"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[20]" class="tableItem">{{f.LockupFees0To12Pct}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[20]" class="tableItem">
<kendo-numerictextbox [(ngModel)]="f.LockupFees0To12Pct"
style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees0To12Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[21]" class="tableItem">{{f.LockupFees12To24Pct}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[21]" class="tableItem" >
<kendo-numerictextbox [(ngModel)]="f.LockupFees12To24Pct"
style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees12To24Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[22]" class="tableItem">{{f.LockupFees24To36Pct}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[22]" class="tableItem" >
<kendo-numerictextbox [(ngModel)]="f.LockupFees24To36Pct"
style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees24To36Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[23]" class="tableItem">{{f.WebfolioRedsFee}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[23]" class="tableItem">
<!-- <kendo-numerictextbox [(ngModel)]="f.WebfolioRedsFee" style="width: 100%; height: 29.5px;"></kendo-numerictextbox> -->
<input kendoTextBox [(ngModel)]="f.WebfolioRedsFee" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[24]" class="tableItem">{{f.LockupComments}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[24]" class="tableItem" >
<input kendoTextBox [(ngModel)]="f.LockupComments" style="width: 100%; height: 29.5px;" />
</td>
<td colspan=i class="tableItem" *ngIf="c == ColumnNames[25] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
{{f.ApplyGateDecliningBalance === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.ApplyGateDecliningBalance}}"
style="width: 13px; height: 13px;" /> Yes </label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[27]" class="tableItem">{{f.GateInvestorPct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[27]" class="tableItem"><input kendoTextBox
[(ngModel)]="f.GateInvestorPct" style="height: 29.5px;" /></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[28]" class="tableItem">{{f.GateSourceName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[28]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.GateSourceId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqGateSource" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[29]" class="tableItem">{{f.GateFundClassPct}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[29]" class="tableItem">
<input kendoTextBox [(ngModel)]="f.GateFundClassPct" style="width: 100%; height: 29.5px;" />
</td>
<td class="tableItem" *ngIf="c == ColumnNames[30]"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[31]" class="tableItem">{{f.IntialProceeds}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[31]" class="tableItem" >
<input kendoTextBox [(ngModel)]="f.IntialProceeds" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[32]" class="tableItem">{{f.PaymentInDays}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[32]" class="tableItem" >
<input kendoTextBox [(ngModel)]="f.PaymentInDays" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[33]" class="tableItem">
{{f.PaymentTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[33]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.PaymentTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[34]"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[35]" class="tableItem">{{f.HoldbackPercentage}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[35]" class="tableItem">
<input kendoTextBox [(ngModel)]="f.HoldbackPercentage"
style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[36]" class="tableItem">{{f.HoldbackPayment}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[36]" class="tableItem" >
<input kendoTextBox [(ngModel)]="f.HoldbackPayment" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[37]" class="tableItem">
{{f.HoldbackTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[37]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;"
[(ngModel)]="f.HoldbackTypeOfDaysId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqTypeOfDays"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan=i class="tableItem" *ngIf="c == ColumnNames[38] && i<1"></td>
<td class="tableItem" *ngIf="c == ColumnNames[39]">
<div *ngIf="EditMode[f.Id]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.value.Id,2)">Review Fees</button>
</div>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[40]" class="tableItem">{{f.ManagementFeeRate}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[40]" class="tableItem" >
<kendo-numerictextbox [(ngModel)]="f.ManagementFeeRate"
style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.ManagementFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[41]" class="tableItem">{{f.IncentiveFeeRate}}
</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[41]" class="tableItem" >
<kendo-numerictextbox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;">
</kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[42]" class="tableItem">
{{f.RealizationFrequencyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[42]" class="tableItem">
<kendo-dropdownlist style="height: 29.5px;"
[(ngModel)]="f.RealizationFrequencyId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqFrequencys"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[57]">
<button *ngIf="!EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 "
(click)="buttonClicked(f.Id)">Edit</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 "
(click)="Update(f.Id)">Save</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 "
(click)="Delete(f.Id)">Delete</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 "
(click)="buttonClicked(f.Id)">Cancel</button>
</td>
</ng-container>
</ng-container>
<!-- </ng-container> -->
</ng-container>
</tr>
</table>
</div>
</div>
答案 0 :(得分：0)
那是因为您没有正常构建阵列。
通常，HTML数组逐行进行：逐列进行。
您必须更改构建阵列的方式。
Here is the working demo（为了避免屏幕上显示太多数据，我对数据进行了切片）
<table class="fundClassesTable table-striped" border="1">
<tr *ngFor="let col of columns; let i = index; first as first; last as last">
<td>{{ col }}</td>
<td *ngFor="let item of data.slice(0, 3)">
{{ first ? item.Description : last ? item.Id : item.AuditSummary }}
</td>
<td *ngFor="let item1 of data1.slice(0, 3)">
{{ first ? item1.Description : last ? item1.Id : item1.AuditSummary }}
</td>
</tr>
</table>