带有对象的 Angular5 ngselect 没有 select

Question

我是 Angular 的新手，我正在寻找解决此问题的好方法，但我读过的帖子并不相关。

我有第一个下拉列表需要存储对象，然后在 select 那里有第二个下拉列表需要填充。这是在 "user preference page" 上，因此需要保存 selected 值。到目前为止这是可行的（控制器正在服务中保存 selected 值，并且在返回到该首选项页面后，我将 selectedValues 放回服务中的任何内容 - 我猜这是正确的方法）。

问题是，当离开该页面并返回时，第一个下拉列表不会 select 用户之前 select 编辑的内容（它存储一个对象，一个"LsafIdp"），而第二个下拉列表（存储一个简单的字符串）。我应该如何处理这个问题才能让第一个下拉列表显示 selected 对象？

注意：我是运行 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>

但我所有的尝试都失败了

谢谢！

Answer 1

好的，经过大量研究我终于找到了

正确的方法是在 <select> 上使用 [compareWith] 并在控制器中定义该方法。

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

compareIdpByName(item1: LsafIdp, item2: LsafIdp){
    return item1.idpName === item2.idpName;
}

带有对象的 Angular5 ngselect 没有 select

Angular5 ngselect with object doesn't select

angular-ngselect

angular