Question

为了保存，我设法得到一个Select模型与我的模型绑定，但是如果我提供编辑功能，我无法弄清楚如何让Angular2在Select列表中自动选择正确的选项。换句话说，如果我通过表单编辑预先存在的对象，我需要选择列表来反映对象的初始状态（例如选择列表中的选项5），而不是仅仅默认为第一个项目

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

我认为它应该如何运作，但不是！

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object === originalObject">{{object.name}}</option>
</select>

所以基本上我试图在选项上使用'selected'属性，但无论出于何种原因它都没有做任何事情。在这种情况下，'selectedObject'将是组件中可以读取的对象。

Answer 1

好的，所以我弄清楚问题是什么，以及我认为最有效的方法。就我而言，因为这两个对象在Javascript方面并不相同，例如：它们可能共享相同的值，但它们是不同的实际对象，例如originalObject与objects完全分开实例化，selected本质上是一组参考数据（用于填充下拉列表）。

我发现最适合我的方法是比较对象的唯一属性，而不是直接比较两个整个对象。此比较在绑定属性<select [ngModel]="originalObject"> <option *ngFor="let object of objects" [ngValue]="object" [selected]="object.uniqueId === originalObject.uniqueId">{{object.name}}</option> </select>中完成：

@foreach ($accounts as $account)
                <tr>
                    <td> {{$account->client->name}} </td>
                    <td> {{$account->agency->name}} </td>
                    <td> {{$account->type->name}} </td>
                    <td> {{$account->username}} </td>
                    <td> {{$account->password}} </td>
                    <td><a href="{{route('accounts.edit',$account->id)}}"><span class="fa fa-edit"></span></a></td>
                </tr>
                @endforeach

Answer 2

更新到角度4.X.X，有一种新方法可以选择标记选项：

<select [compareWith]="byId" [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [ngValue]="item">{{item.name}}
  </option>
</select>

byId(item1: ItemModel, item2: ItemModel) {
  return item1.id === item2.id;
}

一些tutorial here

Answer 3

如果您使用

<select [ngModel]="object">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

您需要将组件类中的属性object设置为您想要预先选择的objects项。

class MyComponent {
  object;
  objects = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
  constructor() {
    this.object = this.objects[1];
  }
}

Answer 4

您可以使用

实现相同目标

 android {
      .....

        defaultConfig {
        ..........
            //remove jackOptions and add
            android.compileOptions.sourceCompatibility 1.8
            android.compileOptions.targetCompatibility 1.8

        }
        // Keep the following configuration in order to target Java 8.
         compileOptions {

           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
  }

Answer 5

如果您只是从数组中删除已编辑的项目，并将其推送到数组的开头，那么它会自动选择吗？

Answer 6

我希望它将对某人有所帮助！（适用于Angular 6）

我必须动态添加许多选择/选项，以下对我有用：

final myVar = [:]
myVar.list = ["abc","def"]
env.list = ["abc","def"]
echo "${myVar.list.getClass()}"
echo "${env.list.getClass()}"

和* .ts

<div *ngFor="let option of model.q_options; let ind=index;">

        <select 
          [(ngModel)]="model.q_options[ind].type" 
          [ngModelOptions]="{standalone: true}"
        > 
          <option 
            *ngFor="let object of objects" 
            [ngValue]="object.type" 
            [selected]="object.type === model.q_options[ind].type"
          >{{object.name}}
          </option>
        </select> 

        <div [ngSwitch]="model.q_options[ind].type">
          ( here <div *ngSwitchCase="'text' or 'imagelocal' or etc."> is used to add specific input forms )
        </div>
</div>

当用户再添加一个“输入选项”（请不要将“输入选项”与选择/选项混淆-选择/选项在此处是静态的）时，用户先前选择的特定选择/选项将保留在每个/全部上动态添加了“输入选项”的选择/选项。

Answer 7

解决Angular中此问题的最简单方法是：

在模板中：

<select [ngModel]="selectedObjectIndex">
  <option [value]="i" *ngFor="let object of objects; let i = index;">{{object.name}}</option>
</select>

在您的课堂上：

this.selectedObjectIndex = 1/0/your number wich item should be selected

在Angular2的“选择列表”中设置最初选择的项目

7 个答案: