Как отобразить значение db в раскрывающемся списке как значение по умолчанию

мне нужна ваша помощь, у меня есть проект с большим количеством дел, и, честно говоря, я не могу закончить его без помощи. Поскольку я новичок в Angular и Springboot с небольшими базовыми знаниями, я не могу продолжать проект, который они мне дали.

Одна из проблем, с которыми я сталкиваюсь, заключается в том, что в некоторых раскрывающихся списках не отображается выбранное значение из БД, это настраиваемый компонент.

[выберите.component.html]

<ng-container *ngIf = "config">
  <label>{{config.label.label | translate:config.label.params}}</label>
  <select class = "form-control form-control-sm" [formControl] = "config.ctrl" (blur) = "onBlur.emit()">
    <option>{{'common.select.default' | translate}}</option>
    <option *ngFor = "let option of config.values" value = "{{option.value}}">{{option.label | translate}}</option>
  </select>
</ng-container>

[выбрать.component.ts]

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {SelectConfig} from '@shared/model/select.config';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss']
})
export class SelectComponent implements OnInit {
  @Input() config!: SelectConfig;
  @Output() onBlur = new EventEmitter<void>();

  constructor() {
  }

  ngOnInit(): void {
  }

  ngOnChange() {

  }
}

[выберите.config.ts]

import { LabelWithParam } from '@shared/model/label-with-params';
import { FormControl } from '@angular/forms';


export interface SelectConfig {
  values: SelectOption[];
  label: LabelWithParam;
  placeholder: string;
  ctrl: FormControl;
}

export interface SelectOption {
  value: any;
  label: string;
}

[подробно.html]

  <app-select *ngIf = "actifSelectConfig$ | async as actifSelectConfig"
              [config] = "actifSelectConfig"
              (onBlur) = "update()">
  </app-select>

[detail.ts]

  public getControl(name: string): FormControl {
    return this.formGroup.get(name) as FormControl;
  }

this.actifSelectConfig$.next( {
  label: {label: 'form.user.label.active'},
  placeholder: 'form.user.placeholder.active',
  ctrl: this.getControl('active'),
  values: ActifHelper.toSelectOption()
});

я не знаю, как отобразить значение БД в раскрывающемся списке, вместо этого он остается на опции «Выбрать значение».

Спасибо!

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
21
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Используйте [ngValue]:

<option *ngFor = "let option of config.values" [ngValue] = "option">{{option.label | translate}}</option>

Я предполагаю, что вы установили выбранное значение с помощью this.getControl('active'):

getControl(): FormControl {
    return this.formBuilder.control(VALUE_FROM_THE_DB);
}

Я обновил свой вопрос кодом для getControl()

Albius 11.05.2022 14:45

Проблема решена, рабочая строка:

<option *ngFor = "let option of config.values" ngValue = "{{option.value}}">{{option.label | translate}}</option>

я поставил ngValue = "{{option.value}} вместо value = "{{option.value}} и проблема решена, теперь получил значение из БД

Другие вопросы по теме