Угловой 7: измененный объект в компоненте не отражается в представлении

Question

Я реализовал раскрывающийся элемент управления в приложении angular 7, и при изменении значения я фильтрую коллекцию и присваиваю ее объекту, связанному с представлением. Объект коллекции, по которому я фильтрую, называется FundTerms, а объект, который я назначаю, который привязан к представлению, называется Фондом. Я реализовал событие изменения значения в компоненте, где написана логика фильтрации.

Я вижу, что событие valueChanged запускается и выполняется логика, но пользовательский интерфейс не отражает измененное значение в поле VehicleType.

У меня есть два элемента управления в представлении. Одним из них является раскрывающийся элемент управления «Имя», а другим - поле 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);
    }
}

View

<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];