Загрузить данные из выпадающего угловой на Firebase
пожалуйста, мне нужна помощь, я пытаюсь сделать проект usin angular 10, firebase и Ngrx, я пытаюсь загрузить выбранный в выпадающем списке firebase проблема в том, что я могу загрузить только id, но не nombre. Я инициализирую переменные id=0 и nombre=". но единственный результат, который я получаю, - это идентификатор переменной, зарегистрированный в firebase. идентификатор переменной изменяется в зависимости от выбранного элемента, а переменная nombre остается пустой. Пожалуйста, помогите мне в этом вопросе, мне нужен результат для важного проекта. это и есть код:
.ТС
import { Component, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute, Params, Router } from '@angular/router'; import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms'; import * as fromApp from '../../store/app.reducer'; import { Store } from '@ngrx/store'; import { map } from 'rxjs/operators'; import * as RecipesActions from '../store/recipe.actions'; import { Subscription } from 'rxjs'; import {TiposdeActivo} from './models/model.interface'; import {DataService} from './services/data.service' import { Identifiers } from '@angular/compiler'; @Component({ selector: 'app-recipe-edit', templateUrl: './recipe-edit.component.html', styleUrls: ['./recipe-edit.component.css'], providers : [DataService] }) export class RecipeEditComponent implements OnInit, OnDestroy { public selectedAsset:TiposdeActivo={id:0, nombre:''}; --> these are the data that i got as default public tipos : TiposdeActivo []; id: number; nombre: string; editMode = false; recipeForm: FormGroup; private storeSub: Subscription; get ingredientsControls() { return (this.recipeForm.get('ingredients') as FormArray).controls; } constructor( private route: ActivatedRoute, private router: Router, private store:Store<fromApp.AppState>, private dataSvc: DataService, ) {} ngOnInit() { this.tipos = this.dataSvc.getTypes(); this.route.params.subscribe((params: Params) => { this.id = +params['id']; this.nombre= params['nombre']; this.editMode = params['id'] != null; this.initForm(); }); } onSubmit() { // const newRecipe = new Recipe( // this.recipeForm.value['name'], // this.recipeForm.value['description'], // this.recipeForm.value['imagePath'], // this.recipeForm.value['ingredients']); if (this.editMode) { /* this.recipeService.updateRecipe(this.id, this.recipeForm.value); */ this.store.dispatch(new RecipesActions.UpdateRecipe({ index:this.id, NombreActivo: this.nombre, newRecipe: this.recipeForm.value, }) ); } else { /* this.recipeService.addRecipe(this.recipeForm.value); */ this.store.dispatch(new RecipesActions.AddRecipe(this.recipeForm.value)) } this.onCancel(); } onAddIngredient() { (<FormArray>this.recipeForm.get('ingredients')).push( new FormGroup({ name: new FormControl(null, Validators.required), amount: new FormControl(null, [ Validators.required, Validators.pattern(/^[1-9]+[0-9]*$/) ]) }) ); } onDeleteIngredient(index: number) { (<FormArray>this.recipeForm.get('ingredients')).removeAt(index); } onCancel() { this.router.navigate(['../'], { relativeTo: this.route }); } ngOnDestroy(){ if(this.storeSub){ this.storeSub.unsubscribe(); } } private initForm() { let recipeName = ''; let recipeImagePath = ''; let recipeDescription = ''; let recipeIngredients = new FormArray([]); if (this.editMode) { /* const recipe = this.recipeService.getRecipe(this.id); */ this.storeSub = this.store.select('recipes').pipe(map(recipeState=>{ return recipeState.recipes.find((recipe, index, name)=>{ return index === this.id }) })).subscribe(recipe =>{ recipeName = recipe.name; recipeImagePath = recipe.imagePath; recipeDescription = recipe.description; if (recipe['ingredients']) { for (let ingredient of recipe.ingredients) { recipeIngredients.push( new FormGroup({ name: new FormControl(ingredient.name, Validators.required), amount: new FormControl(ingredient.amount, [ Validators.required, Validators.pattern(/^[1-9]+[0-9]*$/) ]) }) ); } } }) } this.recipeForm = new FormGroup({ name: new FormControl(recipeName, Validators.required), imagePath: new FormControl(recipeImagePath, Validators.required), description: new FormControl(recipeDescription, Validators.required), ingredients: recipeIngredients, TiposdeActivo: new FormControl(this.selectedAsset) --> thanks to these i recieve the tipos de activos data in the dropdown }); } }
модель.интерфейс.ТС
export interface TiposdeActivo { id: number; nombre: string }
данных.обслуживание.ТС
import { Injectable } from '@angular/core'; import {TiposdeActivo} from '../models/model.interface'; @Injectable() export class DataService { private tipos: TiposdeActivo[] = [ { id:1, nombre:'Terrenos' }, { id:2, nombre:'Mobiliario' }, { id:3, nombre:'Maquinaria' }, { id:4, nombre:'Equipos e Instalaciones' }, { id:5, nombre:'Vehiculos' }, ]; getTypes(): TiposdeActivo[]{ return this.tipos; } }
Что я уже пробовал:
Я попытался использовать массив вот так:
selectedAsset:TiposdeActivo[]=[]
Затем я перепробовал все альтернативы в заключительной части в части ts почти со всеми вариантами точек:
TiposdeActivo: новый FormControl(this.selectedAsset) этот otions сохраняет идентификатор, но не переменную nombre. переменная id сохраняется в базе данных с выбранным выпадающим списком, но переменная nombre остается пустой
pero пример TiposdeActivo: новый FormControl(this.selectedAsset.id) но я получаю только идентификатор для отправки в firebase, я не получаю даже пустую переменную nombre.