angular - オブジェクトを含むAngular5 ngselectが選択されません

Question

私はAngularにかなり慣れていないので、この問題を解決する良い方法を探していますが、読んだ投稿は関連がありませんでした.

オブジェクトを保存する必要がある最初のドロップダウンがあり、そこを選択すると、入力する必要がある2番目のドロップダウンがあります。これは「ユーザー設定ページ」にあるため、選択した値を保存する必要があります。これはこれまでのところ機能しています（コントローラーは選択した値をサービスに保存しており、その設定ページに戻ると、selectedValuesをサービスにあったものに戻します-これが正しいアプローチだと思います）。

問題は、そのページから出て戻ってくると、最初のドロップダウンはユーザーが以前に選択したもの (オブジェクト、「LsafIdp」を格納) を選択しないのに対し、2 番目のドロップダウンは選択します (単純なオブジェクトを格納します)。ストリング）。最初のドロップダウンに選択したオブジェクトを表示するには、これをどのように処理すればよいですか?

注意：私はAngular 5を実行しています

HTMLファイル

    <div class="form-group">
        <label for="idp">IDP</label>
        <select class="form-control" id="idp" required [(ngModel)]="selectedIdp" name="idp" (change)="onIdpSelection()">
            <option *ngFor="let idp of idps" [ngValue]="idp">{{idp.idpName}}</option>
        </select>
    </div>

    <div class="form-group">
        <label for="study">Study</label>
        <select class="form-control" id="study" required [(ngModel)]="selectedStudy" name="study" (change)="onStudySelection()">
            <option *ngFor="let study of selectedIdp.studyList" [ngValue]="study">{{study}}</option>
        </select>
    </div>

    Selected:
    <p>IDP as json: {{selectedIdp | json}}</p> <!-- this works, shows correctly the object saved in the service -->

</form>

TS ファイル:

@Component({
    selector: 'app-context',
    templateUrl: './context.component.html',
    styleUrls: ['./context.component.scss'],
    //encapsulation: ViewEncapsulation.Emulated
})
export class ContextComponent implements OnInit {
    selectedIdp: LsafIdp; // model for the first <select>
    selectedStudy: string; // model for the 2nd <select>
    idps: LsafIdp[];

    constructor(private lsafService: LsafService) {
        this.selectedIdp = new LsafIdp();
    }

    ngOnInit() {
        // on init load the values from the service
        if(this.lsafService.idpSelected!=null)
            this.selectedIdp = this.lsafService.idpSelected;
        if(this.lsafService.studySelected!=null)
            this.selectedStudy = this.lsafService.studySelected;

        this.lsafService.getLsafInfo().subscribe(
            response => {
                let lsafInfo: LsafInfo = response;
                this.idps = lsafInfo.idpList;
            }
        );
    }

    onIdpSelection() {
        console.log("IDP selected: " + this.selectedIdp.idpName);
        this.lsafService.idpSelected = this.selectedIdp;
    }

    onStudySelection() {
        console.log("Study selected: " + this.selectedStudy);
        this.lsafService.studySelected = this.selectedStudy;
    }


}

私は多くのことを試しました：（これには多くの希望がありました）

<option *ngFor="let idp of idps" [ngValue]="idp" [selected]="idp.idpName === selectedIdp.idpName">{{idp.idpName}}</option>

しかし、私の試みはすべて失敗しました

ありがとう！