Angular 4表单选择能够显示默认值[duplicate]

Question

这个问题在这里已有答案：

• Angular 2, set default value to select option 3回答

    `<select class="form-control" id="customer" required [(ngModel)]="application.customer" name="customer" #customer="ngModel">
      <option *ngFor="let customer of customers" [ngValue]="customer">
        {{customer.id}} {{customer.first_name}} {{customer.last_name}}</option>
    </select>`

application.customer和customer都是Customer对象的类型。在组件中填充应用程序时，不会设置默认值。其他文本输入字段如application.vehicle_make可以毫无问题地加载。有没有人知道为什么没有选择应用程序的默认值？我正在使用最新的角度5。

Answer 1

将它与您特定用途的ID绑定！

<select class="form-control" id="customer" required [(ngModel)]="application.customer" name="customer" #customer="ngModel">
      <option *ngFor="let customer of customers" [value]="customer.id">
        {{customer.id}} {{customer.first_name}} {{customer.last_name}}</option>
</select>

现在[ngValue] trun到[value]

Answer 2

很可能不是customer of customers等于application.customer。如果要选择默认值，则需要将该属性添加到其中一个项目：

  <option *ngFor="let customer of customers; let first = first;" [ngValue]="customer" selected="first">
    {{customer.id}} {{customer.first_name}} {{customer.last_name}}</option>

这将选择customers数组中的第一个项目。您还可以在let i = index;中使用*ngFor来选择某个索引，甚至使用let last = last。这将使application.customer等于所选的customer of customers。