Angular 7 : Changed object in the component is not reflecting in the view

Question

我已经在 Angular 7 应用程序中实现了一个下拉控件，并且在值更改时，我正在过滤集合并将其分配给绑定(bind)到 View 的对象。我过滤的集合对象称为 FundTerms，我分配的绑定(bind)到 View 的对象称为 Fund。我已经在编写过滤逻辑的组件中实现了值更改事件。

我可以看到 valueChanged 事件被触发并执行了逻辑，但是 UI 没有反射(reflect) VehicleType 字段中的更改值。

我在 View 中有两个控件。一个是下拉控件，即名称，另一个是 VehicleType 字段，它根据在名称控件的下拉列表中选择的内容显示 VehicleType。

组件

import { Component, OnInit, AfterViewInit,AfterViewChecked, AfterContentInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { TermsService } from '../../services/terms.service';
import { NotifyService } from '../../utilities/notify.service';



@Component({
    selector: 'app-fund-terms',
    templateUrl: './fundTerms.component.html'
})

export class FundTermsComponent implements OnInit {


    @Input() Funds: any;
    public Fund: any;
    _fundTerms: any;

    get FundTerms(): any {
        return this._fundTerms;
    }

     @Input('FundTerms')
    set FundTerms(value: any) {
        this._fundTerms = value;
        if (this._fundTerms) {
        this.Fund = this._fundTerms[0];
        }
    }

    public EditMode = false;

    ngOnInit() {
    }


    public fundChanged(value: any): void {
       this.Fund  =  this.FundTerms.filter(x => x.Id === value.Id);
    }
}

查看

<div *ngIf="Fund">
        <div class="card-body">

            <div class="form-group row" style="width: 100%;">
                <div class="col-md-4">
                    <label for="inputName" class="col-form-label modal-label">Name</label>
                    <div *ngIf="!EditMode">{{Fund.Name}}</div>
                    <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundClass"
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="false" valueField="Id" (valueChange)="fundChanged($event)">
                    </kendo-dropdownlist>
                </div>


                 <div class="col-md-4">
                    <label for="inputTitle" class="col-md-2  col-form-label ">Vehicle Type</label>
                    <div>{{Fund.VehicleTypeName}}</div>
                </div>
            </div>
        </div>  
    </div>

JSON

[
{
    "Id": 5508,
    "Name": "Sylebra Capital Partners (Offshore) Ltd",
    "VehicleTypeId": 5,
    "VehicleTypeName": "Offshore Fund",
    "InvestmentManager": null,
    "NavReportingCycleId": null,
    "NavReportingCycleName": "",
    "CurrencyId": null,
    "CurrencyName": "",
    "SideLetterAgreement": false,
    "SideLetterText": null,
    "PlanAssetFund": null,
    "AuditYearEnd": null,
    "AuditYearEndString": ""
},
{
    "Id": 237146,
    "Name": "P Sylebra Ltd.",
    "VehicleTypeId": 7,
    "VehicleTypeName": "EnTrustPermal SPF - Standard",
    "InvestmentManager": null,
    "NavReportingCycleId": null,
    "NavReportingCycleName": "",
    "CurrencyId": null,
    "CurrencyName": "",
    "SideLetterAgreement": false,
    "SideLetterText": null,
    "PlanAssetFund": null,
    "AuditYearEnd": null,
    "AuditYearEndString": ""
},
{
    "Id": 237147,
    "Name": "Sylebra Capital Partners (Onshore), Ltd",
    "VehicleTypeId": 9,
    "VehicleTypeName": "",
    "InvestmentManager": null,
    "NavReportingCycleId": null,
    "NavReportingCycleName": "",
    "CurrencyId": null,
    "CurrencyName": "",
    "SideLetterAgreement": false,
    "SideLetterText": null,
    "PlanAssetFund": null,
    "AuditYearEnd": null,
    "AuditYearEndString": ""
  }
]

Answer 1

过滤器返回一个数组，尝试获取它的第一个元素。this.FundTerms.filter(x => x.Id === value.Id)[0];