мне нужна ваша помощь, у меня есть проект с большим количеством дел, и, честно говоря, я не могу закончить его без помощи. Поскольку я новичок в 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()
});
я не знаю, как отобразить значение БД в раскрывающемся списке, вместо этого он остается на опции «Выбрать значение».
Спасибо!





Используйте [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);
}
Проблема решена, рабочая строка:
<option *ngFor = "let option of config.values" ngValue = "{{option.value}}">{{option.label | translate}}</option>
я поставил ngValue = "{{option.value}} вместо value = "{{option.value}} и проблема решена, теперь получил значение из БД
Я обновил свой вопрос кодом для getControl()