从动态生成的表中过滤记录以更新角度
我正在尝试为动态生成的表实现更新功能。我已经为tds分配了唯一的ID。现在，当用户点击保存按钮时，我通过传递唯一ID来调用更新方法。
如果您在组件代码中看到update方法，那么我正在尝试传递对象FundClass。我需要导出当前在FundClasses对象中的值。如您所见，在JSON结构中，fundClasses对象包含FundDetailsviewmodel，而其下又包含FundClassDetailsViewModel。
FundClasses-> FundDetailsviewmodel-> FundClassDetailsViewModel
fundclass对象将包含来自FundClassDetailsViewModel对象的单个数组元素的值。我需要根据传递给更新方法的ID来过滤此对象。
我在调试时也共享了对象的结构。因此，在下面的屏幕快照中，如果id为305583，它应该获取该记录并将其分配给FundClass对象。
Json结构
{"FundDetailsViewModel":[{"CogencyClasses":[{"Id":1121,"FundId":652,"ShareClass":"Class B","LocalCurrency":"USD","Name":"Class B USD"}],"FundClassDetailsViewModel":[{"Id":305583,"Description":null,"InvestedAmount":900000,"InceptionDate":null,"LegalFundClassId":13713,"LegalFundClassName":"Class A","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":103,"ClosureStatusName":"In Liquidation","IsSidePocket":true,"IsThematic":true,"VehicleTypeId":1,"VehicleTypeName":"FX Trade","FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250028,"Description":"Class A","InvestedAmount":23732600,"InceptionDate":null,"LegalFundClassId":13713,"LegalFundClassName":"Class A","DataReference":null,"CogencyClassId":1121,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250029,"Description":"Class B","InvestedAmount":119307314,"InceptionDate":null,"LegalFundClassId":13717,"LegalFundClassName":"Class B","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250030,"Description":"Class B1","InvestedAmount":null,"InceptionDate":"2014-05-01T00:00:00","LegalFundClassId":13716,"LegalFundClassName":"Class B1","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250031,"Description":"Class C","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13715,"LegalFundClassName":"Class C","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":250032,"Description":"Class D","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13714,"LegalFundClassName":"Class D","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."},{"Id":305581,"Description":"T","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":13713,"LegalFundClassName":"Class A","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":237146,"FundName":"P Sylebra Ltd."}],"PrimaryLegalFundClasses":[{"Id":237146,"Description":"Class A","ClassType":3},{"Id":237146,"Description":"Class B","ClassType":3},{"Id":237146,"Description":"Class B1","ClassType":3},{"Id":237146,"Description":"Class C","ClassType":3},{"Id":237146,"Description":"Class D","ClassType":3}]},{"CogencyClasses":[{"Id":0,"FundId":0,"ShareClass":"Assign Cogency Fund First","LocalCurrency":null,"Name":"Assign Cogency Fund First "}],"FundClassDetailsViewModel":[{"Id":100541,"Description":"Class A","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11167,"LegalFundClassName":"Class A","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":5508,"FundName":"Sylebra Capital Partners (Offshore) Ltd"},{"Id":250033,"Description":"Class B","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11166,"LegalFundClassName":"Class B","DataReference":null,"CogencyClassId":null,"CogencyClassName":null,"ClosureStatusId":null,"ClosureStatusName":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"VehicleTypeName":null,"FundId":5508,"FundName":"Sylebra Capital Partners (Offshore) Ltd"}],"PrimaryLegalFundClasses":[{"Id":5508,"Description":"Class A","ClassType":1},{"Id":5508,"Description":"Class B","ClassType":1}]}],"VehicleTypes":[{"Id":108,"Spf":false,"Name":"Secondaries","SortOrder":null,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":100,"Spf":false,"Name":"Co-Investment (non-SPF)","SortOrder":1,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":1,"Spf":false,"Name":"FX Trade","SortOrder":2,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":3,"Spf":false,"Name":"Listed ETF","SortOrder":3,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":4,"Spf":false,"Name":"Listed Security","SortOrder":4,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":2,"Spf":false,"Name":"Mutual Fund","SortOrder":5,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":5,"Spf":false,"Name":"Offshore Fund","SortOrder":6,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":6,"Spf":false,"Name":"Onshore US - 40 Act Fund","SortOrder":7,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":9,"Spf":false,"Name":"Onshore US Non - 40 Act Fund","SortOrder":8,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":8,"Spf":false,"Name":"EnTrustPermal Product","SortOrder":9,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":7,"Spf":true,"Name":"EnTrustPermal SPF - Standard","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Id":105,"Spf":true,"Name":"EnTrustPermal SPF – 40 Act","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":106,"Spf":true,"Name":"EnTrustPermal SPF – UCITS","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":102,"Spf":true,"Name":"EnTrustPermal SPF - Blocker","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":103,"Spf":true,"Name":"EnTrustPermal SPF - Co-Investment","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":104,"Spf":true,"Name":"EnTrustPermal SPF - Special Sit","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":10,"Spf":false,"Name":"Private Equity","SortOrder":11,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Id":101,"Spf":false,"Name":"Side-Pocket","SortOrder":12,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Id":11,"Spf":false,"Name":"Special Situation (non-SPF)","SortOrder":13,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Id":12,"Spf":false,"Name":"Third Party Fund of Funds","SortOrder":14,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":13,"Spf":false,"Name":"UCITS","SortOrder":15,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Id":14,"Spf":false,"Name":"Other","SortOrder":50,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false}],"ClosureStatuses":[{"Id":110,"Name":"Hard Closed","IsActive":true,"SortOrder":null},{"Id":111,"Name":"Open","IsActive":true,"SortOrder":null},{"Id":112,"Name":"Soft Closed","IsActive":true,"SortOrder":null},{"Id":1,"Name":"Open - to all","IsActive":true,"SortOrder":1},{"Id":2,"Name":"Open - to Permal only","IsActive":true,"SortOrder":2},{"Id":3,"Name":"Closed - hard","IsActive":true,"SortOrder":3},{"Id":104,"Name":"Closed - with wait list","IsActive":true,"SortOrder":4},{"Id":100,"Name":"Closed - but will reopen","IsActive":true,"SortOrder":5},{"Id":21,"Name":"Closed - but replacing redemptions","IsActive":true,"SortOrder":6},{"Id":101,"Name":"Redemptions Gated","IsActive":true,"SortOrder":7},{"Id":102,"Name":"Redemptions Suspended","IsActive":true,"SortOrder":8},{"Id":103,"Name":"In Liquidation","IsActive":true,"SortOrder":9}]}
我编写了一个更新方法，该方法使用单击save方法时发送的id参数。如何过滤FundClassDetailsViewModel对象并将其分配给this.FundClass。我在组件代码中引用此语句
this.FundClass = this.FundClasses.FundDetailsViewModel.FundClassDetailsViewModel;
组件
import {Component, OnInit, Input} from '@angular/core';
import { TermsService } from '../../services/terms.service';
import { NotifyService } from '../../utilities/notify.service';
@Component({
selector : 'mgr-fund-classes',
templateUrl : './fundClasses.component.html'
})
export class FundClassesComponent implements OnInit {
private _fundClasses : any;
FundClass : any;
public fundClassKeys = [];
public EditMode: any = {};
public get FundClasses(): any {
return this._fundClasses;
}
@Input()
public set FundClasses(value: any) {
this._fundClasses = value;
}
constructor(private termsService: TermsService, private notify: NotifyService) {}
ngOnInit() {
this.init();
}
buttonClicked(id) {
this.EditMode[id] = !this.EditMode[id];
}
Update(id) {
this.FundClass = this.FundClasses.FundDetailsViewModel.FundClassDetailsViewModel;
this.termsService.updateFundClasses(this.FundClass).then((result) => {
if (result) {
this.notify.success('Fund Class Details Successfully Updated');
this.EditMode = !this.EditMode;
// this.managerStrategyDetailsEvent.next('getTermsDetails');
}
}) .catch(err => {
this.notify.error('An Error Has Occured While Updating Fund Class Details');
});
}
init() {
}
HTML
<div>
<input type="checkbox" id="chk" style="width: 13px; height: 13px;" />
<label for="chk">Invested</label>
</div>
<div class="card">
<div class="card-header panel-heading">
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>
<div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
<label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"> <i
data-bind="visible: true" class="fa fa-plus-square"></i><input type="checkbox" class="hidden" /> Add
Class</label>
</div>
</div>
<div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">
<table class="fundClassesTable table-striped">
<tr>
<th class="tableItem bold">Fund Name</th>
<th class="tableItem bold">Accounting Class Name</th>
<th class="tableItem bold">Class ID</th>
<th class="tableItem bold">Legal Fund Class</th>
<th class="tableItem bold">Inception Date</th>
<th class="tableItem bold">Invested Amount</th>
<th class="tableItem bold">Vehicle Type</th>
<th class="tableItem bold">Closure Status</th>
<th class="tableItem bold">Is Side Pocket?</th>
<th class="tableItem bold">Is Thematic?</th>
<th class="tableItem bold">Cogency Class?</th>
<th class="tableItem"></th>
</tr>
<ng-container *ngFor="let fundClass of FundClasses.FundDetailsViewModel">
<tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
<td class="tableItem">{{ f.value.FundName}}</td>
<td class="tableItem">{{ f.value.Description}}</td>
<td class="tableItem">{{f.value.Id}}</td>
<td *ngIf="EditMode[f.value.Id]" class="tableItem">
<kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.LegalFundClassId"
class="form-control form-control-sm" [data]="fundClass.PrimaryLegalFundClasses"
[filterable]="false" textField="Description" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.LegalFundClassName}}
</td>
<td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
<kendo-datepicker style="width:100%" [format]="'MMMM yyyy'" [topView]="'decade'"
[bottomView]="'year'" [(ngModel)]="f.value.InceptionDate"
class="form-control form-control-sm">
</kendo-datepicker>
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.InceptionDate | date:"'MMMM yyyy"}}
</td>
<td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.value.InvestedAmount"
style="width: 284px; height: 29.5px;" />
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.InvestedAmount | number : '.2-2'}}
</td>
<td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
<kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.VehicleTypeId"
class="form-control form-control-sm" [data]="FundClasses.VehicleTypes" [filterable]="false"
textField="Name" [valuePrimitive]="true" valueField="Id"></kendo-dropdownlist>
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.VehicleTypeName}}
</td>
<td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
<kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.ClosureStatusId"
class="form-control form-control-sm" [data]="FundClasses.ClosureStatuses"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.ClosureStatusName}}
</td>
<td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
<input type="checkbox" value="{{f.value.IsSidePocket}}" id="chk"
style="width: 13px; height: 13px;" />
<label for="chk">Yes</label>
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.IsSidePocket == true ? 'Yes' : 'No'}}
</td>
<td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
<input type="checkbox" value="{{f.value.IsThematic}}" style="width: 13px; height: 13px;" />
<label for="chk">Yes</label>
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.IsThematic == true ? 'Yes' : 'No'}}
</td>
<td [attr.id]="'f.value.Id'" *ngIf="EditMode[f.value.Id]" class="tableItem">
<kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.CogencyClassId"
class="form-control form-control-sm" [data]="fundClass.CogencyClasses" [filterable]="false"
textField="Name" [valuePrimitive]="true" valueField="Id"></kendo-dropdownlist>
</td>
<td [attr.id]="'f.value.Id'" *ngIf="!EditMode[f.value.Id]" class="tableItem" style="width:100%">
{{ f.value.CogencyClassId}}
</td>
<td class="tableItem">
<button *ngIf="!EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-4"
(click)="buttonClicked(f.value.Id)">Edit</button>
<button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="buttonClicked(f.value.Id)">Save</button>
<button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="buttonClicked(f.value.Id)">Delete</button>
<button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="buttonClicked(f.value.Id)">Cancel</button>
</td>
</tr>
</ng-container>
</table>
</div>
</div>
我试过了，但是没用
this.FundClass = this.FundClasses.FundDetailsViewModel.array.forEach(x => {
x.Id = id;
});
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？