Angular - 预先选择一个选择选项，其中 [ngValue] [(ngModel)] 是对象答案

【问题标题】：Angular - pre-select a select option with [ngValue] [(ngModel)] being objectsAngular - 预先选择一个选择选项，其中 [ngValue] [(ngModel)] 是对象
【发布时间】：2018-11-09 13:57:49
【问题描述】：

目标

我想预先选择一个带有 [ngValue] 和 [(ngModel)] 的选择选项，其值为对象 TypeConge：

{ "id": 2, "libelle": "Holidays" }

第一次尝试

            <div class="form-group col-12">
                <label class="font-weight-bold" for="typeConge"> Type congé </label>
                <select class="form-control" id="typeConge" name="typeConge"  [(ngModel)]="conge.typeConge" >
                    <option [ngValue]="null"></option>
                    <option [ngValue]="typeCongeOption" *ngFor="let typeCongeOption of typeConges; trackBy: trackTypeCongeById">{{typeCongeOption.libelle}}</option>
                </select>
            </div>
            {{conge.typeConge| json}}

问题：选择选项未预先选择。

第二次尝试

            <div class="form-group col-12">
                <label class="font-weight-bold" for="typeConge"> Type congé </label>
                <select class="form-control" id="typeConge" name="typeConge" [compareWith] = 'customCompareTypeConge' [(ngModel)]="conge.typeConge" >
                    <option [ngValue]="null"></option>
                    <option [ngValue]="typeCongeOption" *ngFor="let typeCongeOption of typeConges; trackBy: trackTypeCongeById">{{typeCongeOption.libelle}}</option>
                </select>
            </div>
            {{conge.typeConge| json}}

...

customCompareTypeConge(tc1: TypeConge, tc2: TypeConge){
        return tc1.id == tc2.id;
    }

问题：在控制台中我发现：无法读取 null 的属性 'id'

编辑

Link to stackblitz.

编辑 2

可以在this adress找到有关此问题的完整说明。

你能帮帮我吗？

谢谢！

【问题讨论】：

你试过[(ngModel)]="conge.typeConge.id" [ngValue]="typeCongeOption.id"吗？
我刚试过。它不工作。无论如何，我宁愿直接通过select来获取对象。
你能创建一个问题陈述的堆栈吗？
你是否设置了这样的初始值：this.conge.typeConge = this.typeConges[0]？或者this.conge.typeConge = null如果你想选择第一个选项。
@ConnorsFan 否。初始值来自对服务器的请求。所以 this.conge.typeConge 包含对象 typeConge { "id": 2, "libelle": "Holidays" } 例如。

标签： angular

【解决方案1】：

我认为您对 ngModel 和 ngValue 之间的关系如何工作以默认选择感到困惑。它必须是 ngModel 值和 ngValue 之间的 1:1 显式比较。

您似乎正在使用typeConges 在循环中定义您的选项，其中typeCongeOption 作为选项值，这是一个完整的索引项，然后使用conge.typeConge 定义您的ngModel...必须有在这两者之间进行 1 === 1 比较，您无法将完整的索引项与一个值进行比较并期望匹配。

请查看此 stackblitz 示例。

https://stackblitz.com/edit/angular-13wnyq?embed=1&file=app/select-overview-example.ts

【讨论】：

感谢您的回答。我完全不明白。这不是 1 === 1 比较，因为我的 typeCongeOption 是一个 TypeConge 对象，我的 conge.typeConge 也是一个 TypeConge 对象？
你的例子很有趣。但就我而言，conge 不仅仅是一个身份。它是一个包含另一个 TypeConge 类对象的对象。我的问题是我需要显示它，但是一旦被选中，我也需要将它作为对象检索。
做一个console.log(typeCongeOption === conge.typeConge) 确实是日志吗？
必须有一个明确的匹配才能使其工作，如果您提供一个 stackblitz 示例，我相信其他人或我自己可以提供有关如何在使其工作的同时实现您所需要的建议......但是你需要的并没有改变不幸的是它需要是一个明确的匹配。
stackblitz 链接在我的主要帖子中的编辑中。