angular - Angular 7:コンポーネント内の変更されたオブジェクトがビューに反映されていません

Question

angular 7アプリケーションにドロップダウンコントロールを実装し、値の変更時に、コレクションをフィルタリングして、ビューにバインドされているオブジェクトに割り当てています。フィルタリングしているコレクション オブジェクトが呼び出さFundTermsれ、ビューにバインドされている割り当て対象のオブジェクトは Fund と呼ばれます。フィルタリング ロジックが記述されているコンポーネントに値変更イベントを実装しました。

valueChangedイベントがトリガーされ、ロジックが実行されていることがわかりますが、UI は変更された値をVehicleTypeフィールドに反映していません。

ビューに 2 つのコントロールがあります。1 つは名前であるドロップ ダウン コントロールであり、もう 1 つは名前コントロールのドロップダウンで選択された内容に基づい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": ""
  }
]