Установите первоначально выбранный элемент в списке выбора в Angular2

Мне удалось получить список 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" в этом случае будет объектом в компоненте, который он может прочитать.

Ответы

Ответ 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>

Ответ 2

Обновление до угловой 4.XX, есть новый способ отметить выбранную опцию:

<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;
}

Некоторый учебник здесь

Ответ 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];
  }
}

Ответ 4

Вы можете добиться того же

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

Ответ 5

Будет ли это работать, если вы просто удалите отредактированный элемент из массива и нажмите его в начале массива, чтобы он был автоматически выбран?

Ответ 6

Надеюсь это кому-нибудь поможет! (работает на Angular 6)

Мне пришлось динамически добавлять множество select/options, и у меня сработало следующее:

<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>

и в *.ts

// initial state of the model
// q_options in html = NewOption and its second argument is option type
model = new NewQuestion(1, null, 2, 
  [
    new NewOption(0, 'text', '', 1), 
    new NewOption(1, 'imagelocal', '', 1)
  ]);

// dropdown options
objects = [
    {type: 'text', name: 'text'},
    {type: 'imagelocal', name: 'image - local file'},
    {type: 'imageurl', name: 'image URL'}
   ( and etc.)
];

Когда пользователь добавляет еще одну "опцию ввода" (пожалуйста, не путайте "опцию ввода" с select/options - select/options здесь static), конкретный select/option, выбранный пользователем ранее, сохраняется для каждого/все динамически добавляются " опция ввода выберите/опции.

Ответ 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