Установите значение по умолчанию в параметрах выбора, используя Angular 17

Я хочу установить Male в качестве значения по умолчанию.

Вот угловой HTML:

<select name = "gender" id = "gender" [(ngModel)] = "registration.gender">
  <option value = "male">Male</option>
  <option value = "female">Female</option>
  <option value = "others">Others</option>
</select>

Мой файл .TS:

export class Registration implements OnInit {
  public patients = [] as Patient[];
  public patient = {} as Patient;
  public registration = {} as Registration;
  //registration.gender = 'male';
  gender = 'male';
}

Я попробовал несколько других методов, но не могу установить male в качестве значения по умолчанию! Что я могу попробовать дальше?

это тебе поможет stackblitz

— 17.05.2024 21:24

Я знал, что это что-то настолько простое. Пожалуйста, опубликуйте это как ответ.

— 17.05.2024 21:28

angular select ngmodel

17.05.2024 21:04

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

477

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мы можем просто инициализировать значение свойством gender как male.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <select name = "gender" id = "gender" [(ngModel)] = "registration.gender">
      <option value = "male">Male</option>
      <option value = "female">Female</option>
      <option value = "others">Others</option>
    </select>
  `,
})
export class App {
  public patients = [] as any[];
  public patient = {} as any;
  // this will also work, else go for ngOnInit!
  //public registration = { gender: 'male' } as any;
  public registration = {} as any;
  //registration.gender = 'male';
  gender = 'male';

  ngOnInit() {
    this.registration.gender = 'male';
  }
}

bootstrapApplication(App);

Демо-версия Stackblitz

Большое спасибо. Ваш ответ немного отличается от комментария выше. Я использовал код из вашего комментария: ngOnInit() { this.registration.gender = 'male'; }

— 17.05.2024 21:43

@ElaineByene Я добавлю это и в комментарии!

— 17.05.2024 21:44

17.05.2024 21:29