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

Question

Установить изначально выбранный пункт в списке выбора в Angular7

Я новичок в угловой структуре.Я хочу установить по умолчанию выпадающий список по значению.Что следует добавить в файл .ts, чтобы получить ожидаемый результат?

.html файл:

<select  name="employees"   (change) = "onEdit(emp)" [(ngModel)]="employees" class="form-control">
  <option *ngFor="let emp of employees"  [value]="emp.id">
    {{emp.fullName}}
  </option>
</select>

.ts файл:

ngOnInit() {    
this.service.getEmployeenames().subscribe(actionArray => {
  this.employees = actionArray.map(item => {
    return {
      id: item.payload.doc.id,
      ...item.payload.doc.data()
    } as Employee;
   })
  });     
 }

Предположим, 3В раскрывающемся списке выберите:

Employee1
Employee2
Employee3

По умолчанию я хочу установить Employee1.

Спасибо!

Answer 1

В качестве альтернативы вы можете использовать ng [ngValue].

Когда вы связываетесь с [value], оно обычно имеет формат строки или числа.

Однако могут быть сценарии, в которых вы хотели бы привязать весь объект к вашему варианту выбора.Это когда ngValue становится полезным.

Для этого примера мы связали весь объект emp со значением опции.Мы выбрали первый индекс массива employee в качестве выбранного по умолчанию значения.

В файле component.ts,

employee: any = undefined;
employees = [
  {fullName: 'Employee-0',id:"0"},
  {fullName: 'Employee-1',id:"1"},
  {fullName: 'Employee-2',id:"2"}
];

constructor() {
  this.employee = this.employees[1];
  console.log(this.employee)
}

Component.html,

<select  name="employees" (change) = "onEdit(emp)" [(ngModel)]="employee" class="form-control">
  <option *ngFor="let emp of employees" [ngValue]="emp">
    {{emp.fullName}}
  </option>
</select>

Я создал здесь demo .

---

РЕДАКТИРОВАТЬ: Чтобы добавить необходимую проверку в ваш код, вам нужно будет добавить обязательный атрибут в <select> тег.Я также добавил заполнитель по умолчанию для select.

<select name="employeeInput" [(ngModel)]="employee" required class="form-control" #employeeInput="ngModel" >
  <option disabled [ngValue]="null">--Selected--</option>
  <option *ngFor="let emp of employees" [ngValue]="emp">
    {{emp.fullName}}
  </option>
</select>

<div *ngIf="employeeInput.control.errors?.required && isSubmitted">
    Name is required.
</div>

<div>
  <button (click)="submit()">SUBMIT</button>
</div>

#employeeInput="ngModel" export NgModel в локальную переменную employeeInput.С помощью * ngIf будет отображаться сообщение об ошибке проверки, если не выбраны никакие опции для выбора.

В ваших component.ts я установил employee как null, чтобы выбрать местозаполнитель по умолчанию.Кроме того, метод submit() устанавливает isSubmitted как true, так что сообщение проверки будет отображаться только после отправки формы.Условие if проверит, выбран ли вход со значением, поэтому условие this.employeeInput.errors.

@ViewChild('employeeInput') employeeInput: TemplateRef<any>;
employee: any = undefined;
isSubmitted: boolean = false;
employees = [
  {fullName: 'Employee-0',id:"0"},
  {fullName: 'Employee-1',id:"1"},
  {fullName: 'Employee-2',id:"2"}
];

constructor() {
  this.employee = null;
}

submit() { 
  this.isSubmitted = true;
  if (!this.employeeInput.errors) {
    // will only enter this block of code if the select has no errors
    // insert the rest of your firebase code
  }

Проверьте demo .

Answer 2

Вам необходимо связать employeeId с [(ngModel)], а не со списком, потому что вы связываете [value]="emp.id" с employeeId

HTML код:

                                                              \/\/\/\/\/
<select  name="employees" (change)="onEdit(emp)" [(ngModel)]="employeeId" class="form-control">
  <option *ngFor="let emp of employees" [value]="emp.id">
    {{emp.fullName}}
  </option>
</select>

Код TS:

employeeId : any = "0" //  like this in your case it should be an Id of employee

Stackblitz