Angular set dropdown select option as default selected before iteration

Question

I have a select dropdown and I iterate the options from a list. I am trying to set as selected a separate option (as a default), in case of user is not selecting a value.

Here is how I am trying to implement that:

<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>

I also tried:

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

and even:

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

but none of the above worked.

Any help is welcome

Answer 1

Attribute selected will not help much if you are using ngModel then you can do easily with setting default value to the defined model.

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

Then inside component.ts

public book: any = {
   pageLayout: ''
}

Edit

To set default option we need to set pageLayout value to id instead of empty string.

public book: any = {
   pageLayout: 1
}

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

Answer 2

您可以使用 Angular Reactive Form 中的 FormControl。这很简单。 Angular Docs About Reactive Form 您需要导入reactive form到您的模块中

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

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

您需要在 component.ts 中创建 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('');
}

之后，您需要将 Form 控件设置为selecthtml 中的元素

<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'))

在这种情况下，select 的默认值为 null。并且值为 null 的选项将在 dropdawn 中被选择。

在你的情况new FormControl(0)下作为默认值。

Answer 3

试试这个<option [value]="undefined" selected>No Default Layout</option>，它应该有效。