angular - 根据父组件中的过滤数据刷新子组件中的表格
问题描述
我在子组件中有一个表，我通过从父组件传递对象来填充它。我传递的对象称为 FundClasses
我正在尝试根据子组件上的复选框选择过滤父组件中的一些值。我根据子组件复选框选择进行过滤的父组件中的方法称为getInvestedDetails。
我可以看到对象已更新，但表未刷新。我如何刷新表格。当我使用 viewchild 调用 init 方法时，呈现的页面是空白的。
子组件html
<div>
<input type="checkbox" id="chk" style="width: 13px; height: 13px;" checked="checked" (click)="isInvestedSelected($event)" />
<label for="chkInvested">Invested</label>
</div>
<div class="card scrollClass">
<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> -->
<button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right" (click)="openFundClassModal()"> <i
data-bind="visible: true" class="fa fa-plus-square"></i> Add Class</button>
</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]="'dd-MM-yyyy'"
[(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:"'dd-MM-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="chkSidePocket" [(ngModel)]="f.value.IsSidePocket"
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;" [(ngModel)]="f.value.IsThematic" />
<label for="chkThematic">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)="Update(f.value.Id)">Save</button>
<button *ngIf="EditMode[f.value.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="Delete(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>
子组件
import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { TermsService } from '../../services/terms.service';
import { NotifyService } from '../../utilities/notify.service';
import { AddFundClassComponent } from './addFundClass.component';
@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 fundClassWindowOpened: boolean;
@Output() termDetailsEvent = new EventEmitter<string>();
@ViewChild(AddFundClassComponent)
addFundClassComponent: AddFundClassComponent;
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
.reduce((prev, next) => prev.concat(next.FundClassDetailsViewModel), [])
.find(obj => obj.Id === id);
this.termsService.updateFundClasses(this.FundClass).then((result) => {
if (result) {
this.notify.success('Fund Class Details Successfully Updated');
this.EditMode = !this.EditMode;
this.termDetailsEvent.next('getTermsDetails');
}
}).catch(err => {
this.notify.error('An Error Has Occured While Updating Fund Class Details');
});
}
Delete(id) {
this.termsService.deleteFundClasses(id).then((result) => {
if (result) {
this.notify.success('Fund Class Successfully Deleted');
this.EditMode = !this.EditMode;
this.termDetailsEvent.next('getTermsDetails');
}
}).catch(err => {
this.notify.error('An Error Has Occured While Updating Fund Class Details');
});
}
openFundClassModal() {
if (this.addFundClassComponent != null) {
this.fundClassWindowOpened = true;
}
}
dismissFundClassModal() {
this.fundClassWindowOpened = false;
}
isInvestedSelected(s) {
this.termDetailsEvent.emit(s.target.checked);
}
init() {
}
}
父组件
import {Component, OnInit, Input, ViewChild} from '@angular/core';
import { TermsService } from '../services/terms.service';
import { FundClassesComponent } from './fundClasses/fundClasses.component';
@Component({
selector : 'mgr-terms',
templateUrl : 'terms.component.html'
})
export class TermsComponent implements OnInit {
private Error: string;
public TermDetails: any;
private _ManagerStrategyId: number;
public get ManagerStrategyId(): number {
return this._ManagerStrategyId;
}
@ViewChild(FundClassesComponent)
fundClassesComponent: FundClassesComponent;
@Input()
public set ManagerStrategyId(value: number) {
this._ManagerStrategyId = value;
}
FundClasses: any;
constructor(private termsService: TermsService) {}
ngOnInit() {
this.init();
}
init() {
this.getTermsDetails();
}
public getInvestedDetails(isInvested: boolean) {
if (isInvested) {
this.FundClasses = this.TermDetails.FundClassViewModel.FundDetailsViewModel
.reduce((prev, next) => prev.concat(next.FundClassDetailsViewModel), [])
.filter(obj => obj.InvestedAmount !== null);
// this.fundClassesComponent.init();
} else {
}
}
public getTermsDetails() {
if (this.ManagerStrategyId != null) {
this.termsService.getTermsDetails(this.ManagerStrategyId).subscribe((data: any) => {
this.TermDetails = data;
this.FundClasses = this.TermDetails.FundClassViewModel;
});
}
}
}
解决方案
我认为您需要使用 OnChanges Angular Lifecycle 来检测子组件中父输入的更改。https://angular.io/api/core/OnChanges。
ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
let change = changes[propName];
let curVal = JSON.stringify(change.currentValue);
let prevVal = JSON.stringify(change.previousValue);
console.log(curVal);
console.log(prevVal);
if(prevVal !== curVal) {
// trigger your method to setting data
}
}
}
推荐阅读
- javascript - 使用 Auth0 进行“虚拟”身份验证
- swift - 类型“类别”不符合协议“序列”
- python - 在 Google Coral 开发板上构建时 dlib 挂起
- r - spatstat 中 ppm() 的并行化和处理？
- python - TypeError：“类名”对象不可调用（在通过 tkinter.Button.command 调用的方法内）
- sql - oracle 009933 sql 命令未正确结束
- python - 为什么我在这个网络抓取中创建的 for 循环只打印事件的第一个？我希望它能打印出所有的标题、链接、地点、日期和描述
- c++ - 有没有办法在运行时停止循环重复多次
- javascript - 在javascript中计算表格最后一列中输入值的总和
- python - 如何将python中的crank-nicolson方法应用于像薛定谔这样的波动方程