Question

目标

我想使用[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。

能帮我吗？

谢谢！

Answer 1

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

您似乎正在使用public function columnMap() { return array( 'LastName' => 'lastName', ); }来定义循环中的选项，并以typeConges作为完整索引项的选项值，然后使用typeCongeOption定义ngModel。 ..这两个之间必须有1 === 1的比较，您不能将完整的索引项与一个值进行比较并期望匹配。

请查看此stackblitz示例。

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

角度-以[ngValue] [（ngModel）]为对象预选择选择选项

1 个答案: