Выпадающие меню обычно используются в приложениях Angular, чтобы предоставить пользователям список опций для выбора. Иногда вам может потребоваться предварительно выбрать значение по умолчанию в раскрывающемся списке, чтобы улучшить взаимодействие с пользователем. В этой статье мы рассмотрим семь различных методов достижения этой цели в Angular, а также приведем примеры кода.

Метод 1: использование ngModel и ngValue

<select [(ngModel)]="selectedValue">
  <option *ngFor="let option of options" [ngValue]="option">{{ option }}</option>
</select>

selectedValue: string = 'Option 2';
options: string[] = ['Option 1', 'Option 2', 'Option 3'];

Метод 2: использование реактивных форм

<form [formGroup]="form">
  <select formControlName="selectedValue">
    <option *ngFor="let option of options" [value]="option">{{ option }}</option>
  </select>
</form>

selectedValue: string = 'Option 2';
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    selectedValue: [this.selectedValue]
  });
}

Метод 3: использование директивы [selected]

<select>
  <option *ngFor="let option of options" [selected]="option === selectedValue">{{ option }}</option>
</select>

selectedValue: string = 'Option 2';
options: string[] = ['Option 1', 'Option 2', 'Option 3'];

Метод 4: использование привязки [attr.selected]

<option *ngFor="let option of options" [attr.selected]="option === selectedValue ? true : null">{{ option }}</option>

selectedValue: string = 'Option 2';
options: string[] = ['Option 1', 'Option 2', 'Option 3'];

Метод 5: использование [ngModel] с функцией сравнения

<select [(ngModel)]="selectedValue">
  <option *ngFor="let option of options" [ngValue]="option" [ngModel]="option" [compareWith]="compareFn">{{ option }}</option>
</select>

selectedValue: string = 'Option 2';
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
compareFn(option1: string, option2: string) {
  return option1 === option2;
}

Метод 6: использование Renderer2

<select #dropdown>
  <option *ngFor="let option of options" [value]="option">{{ option }}</option>
</select>

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
@ViewChild('dropdown') dropdown: ElementRef;
selectedValue: string = 'Option 2';
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
constructor(private renderer: Renderer2) { }
ngAfterViewInit() {
  const option = this.dropdown.nativeElement.querySelector(`[value="${this.selectedValue}"]`);
  this.renderer.setProperty(option, 'selected', true);
}

Метод 7: использование ViewChild и ссылочной переменной шаблона

<select #dropdown>
  <option *ngFor="let option of options" [value]="option">{{ option }}</option>
</select>

import { Component, ViewChild } from '@angular/core';
@ViewChild('dropdown') dropdown: any;
selectedValue: string = 'Option 2';
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
ngAfterViewInit() {
  this.dropdown.nativeElement.value = this.selectedValue;
}

В этой статье мы рассмотрели семь различных методов предварительного выбора значения в раскрывающемся списке Angular. Предпочитаете ли вы использовать ngModel, реактивные формы, директивы, функции сравнения, Renderer2 или ViewChild, теперь у вас есть различные варианты реализации этой функциональности в ваших приложениях Angular. Поэкспериментируйте с этими методами и выберите тот, который соответствует вашим конкретным требованиям и стилю программирования.