Augusto100 Ответов: 0

Загрузить данные из выпадающего угловой на 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.

0 Ответов