Установить значение списка выбора по умолчанию Angular2

Я хочу установить параметр по умолчанию для выбора в angular 2 как «Выбрать вариант». Вот код, который у меня есть:

HTML

<div class="form-group">
                        <label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
                        <div class="col-md-4">
                            <select id="example" name="example" class="form-control" [(ngModel)]="exampleArray" (ngModelChange)="changes()">
                                <option disabled selected>Select a Custom Fix</option>
                                <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option>
                            </select>
                        </div>
                    </div>

Машинопись

changes(){
console.log(this.example.option);
}

У меня есть строка в моем html:

<option disabled selected>Select a Custom Fix</option>

Как я могу сделать это по умолчанию? Он отделен от моего массива, используемого с ngModel


angular html select angular2-ngmodel
person Bhetzie    schedule 16.11.2016    source источник
comment
Как можно одновременно отключить и выбрать параметр? Если он отключен, то по определению не может быть выбран.   -  person Dan Wilson    schedule 16.11.2016

Ответы (3)


arrow_upward
1
arrow_downward

Если вы используете [ngValue], вам необходимо назначить идентичный экземпляр объекта exampleArray. Другой экземпляр объекта с такими же свойствами и значениями не подойдет.

Если вы используете [value]="..." вместо [ngValue], то можно использовать только строки, и для сравнения строк с разными экземплярами строк, содержащими одинаковые символы, они считаются равными, но это не относится к экземплярам объектов, где exampleArray должна ссылаться на ту же самую ссылку на объект, которая используется с [ngValue].

На самом деле

[(ngModel)]="exampleArray"

в вашем примере недопустим, потому что модель не должна быть массивом, который используется для генерации элементов <option>, это должно быть свойство, содержащее выбранное значение.

   <div class="form-group">
        <label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
        <div class="col-md-4">
            <select id="example" name="example" class="form-control" [(ngModel)]="selectedItem" (ngModelChange)="changes()">
                <option disabled selected>Select a Custom Fix</option>
                <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option>
            </select>
        </div>
    </div>

constructor() {
  this.selectedItem = exampleArray[1]; // will make the 2nd element of `exampleArray` the selected item
}
person Günter Zöchbauer    schedule 16.11.2016

arrow_upward
6
arrow_downward

Если вы хотите, чтобы этот параметр был выбран в начале - обычно это когда значение ngModel равно undefined, вам просто нужно указать Angular, что этот параметр отвечает за значение undefined, поэтому он должен быть:

<option disabled [ngValue]="undefined">Select a Custom Fix</option>

Вам также необходимо исправить вашу [(ngModel)] привязку - прямо сейчас вы пытаетесь привязать выбранное значение к .. самому массиву. Лучше привязать к какому-то другому свойству, например:

<select id="example" name="example" class="form-control" [(ngModel)]="example">

(Вы можете увидеть рабочее решение здесь: http://plnkr.co/edit/Zu29ztqaaDym1GYDAhtJ?p=preview)

person Tomek Sułkowski    schedule 16.11.2016

arrow_upward
2
arrow_downward

Вы должны указать этой опции значение, привязать элемент select к переменной ID и установить эту переменную при загрузке компонента.

// controller
exampleArraySelectedValue = -1;
<div class="form-group">
  <label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
  <div class="col-md-4">
    <select id="example" name="example" class="form-control" [(ngModel)]="exampleArraySelectedValue" (ngModelChange)="changes()">
      <option value="-1">Select a Custom Fix</option>
      <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option>
    </select>
  </div>
</div>

person Dan Wilson    schedule 16.11.2016