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

Question

Я хочу установить для параметра по умолчанию значение 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> 

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

Answer 1

Если вы используете [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 
} 

Answer 2

Вы должны указать эту опцию значение, привязать элемент 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>

Answer 3

Если вы хотите иметь эту опцию в начале - это, как правило, когда значение по ngModel «s является undefined, вы просто должны сказать, Угловое, что эта опция отвечает за 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)