Опция выбора углового набора по умолчанию выбрана перед итерацией

Question

У меня есть выпадающий список, и я перебираю варианты из списка. Я пытаюсь установить как выбранную отдельную опцию (по умолчанию), если пользователь не выбирает значение.

Вот как я пытаюсь это реализовать:

<select [(ngModel)]="book.pageLayout">
    <option [value]="0" [attr.selected]="book.defaultLayoutId === null">No Default Layout</option>
    <option *ngFor="let l of availableLayouts"
            [value]="l.id"
            [attr.selected]="book.pageLayout == l.id">
      {{l?.name}}
    </option>
  </select>

Я тоже пробовал:

<option [value]="0" selected="selected">No Default Layout</option>

и даже:

<option [value]="0" selected="1==1">No Default Layout</option>

но ничего из вышеперечисленного не сработало.

Любая помощь приветствуется

Answer 1

Вы можете использовать FormControl из Angular Reactive Form. Это легко. Angular Docs о реактивной форме Вам нужно импортировать reactive form к вам модуль

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Чем вам нужно создать FormControl в вашем component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

После этого вам нужно установить элемент управления Form для вашего элемента select в html

<select [formControl]="name">
  <option value="null">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

Если вам нужно значение по умолчанию для select, вы должны создать formControl со значением, например:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl(null);
}

///(you can pass any to new FormControl(0), or new FormControl(false), new FormControl('string'))

В этом случае значение по умолчанию для выбора будет нулевым. И параметры со значением ноль будут выбраны в раскрывающемся окне.

В вашем случае new FormControl(0) в качестве значения по умолчанию.

Answer 2

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

<select [(ngModel)]="book.pageLayout">
  <option value="">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

Тогда внутри component.ts

public book: any = {
   pageLayout: ''
}

Редактировать

Чтобы установить опцию по умолчанию, нам нужно установить значение pageLayout в id вместо пустой строки.

public book: any = {
   pageLayout: 1
}

public availableLayouts: any = [
  {
    name: "One",
    id: 1
  },
  {
    name: "Two",
    id: 2
  }
]

Answer 3

Вы можете попробовать это

ng-selected="selected"

https://docs.angularjs.org/api/ng/directive/ngSelected

Answer 4

Попробуйте это <option [value]="undefined" selected>No Default Layout</option>, оно должно работать.