Question

我对Angular还是很陌生，我正在寻找一种解决此问题的好方法，但是我读过的帖子并不相关。

我有第一个需要存储对象的下拉菜单，然后在选择第二个需要填充的下拉菜单。这在“用户首选项页面”上，因此需要保存选定的值。到目前为止，它可以正常工作（控制器将选择的值保存在服务中，然后返回该首选项页面，我将selectedValues放回到服务中的任何值上-我猜这是正确的方法。）

问题在于，当离开该页面并返回时，第一个下拉菜单不会选择用户先前选择的内容（存储对象，即“ LsafIdp”），而第二个下拉菜单会选择该内容存储一个简单的字符串）。我应该如何处理才能使第一个下拉菜单显示所选对象？

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

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

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

    <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未选择

1 个答案: