从角度上传下拉数据到Firebase

问题描述

我需要一些帮助，我正在尝试使用角度10，firebase和Ngrx创建一个项目，我正在尝试将下拉列表中的所选内容上传到firebase，问题是我只能上传id，但不能上传nombre。我初始化变量id = 0和nombre =''。但我得到的唯一结果是在firebase中注册的变量ID，而不是nombre。变量id随所选项目而变化，变量nombre保持为空。请帮我解决这个问题，我需要一个importan项目的结果。这是代码：

ts。

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,amount: new FormControl(ingredient.amount,[
                  Validators.required,Validators.pattern(/^[1-9]+[0-9]*$/)
                ])
              })
            );
          }
        }
      })

    }

    this.recipeForm = new FormGroup({
      name: new FormControl(recipeName,imagePath: new FormControl(recipeImagePath,description: new FormControl(recipeDescription,ingredients: recipeIngredients,TiposdeActivo: new FormControl(this.selectedAsset) --> thanks to these i recieve the tipos de activos data in the dropdown
    });
  }
}

data.service.ts

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;
  }
}

model.interface.ts

export interface TiposdeActivo {
  id: number;
  nombre: string
}

.html

<form>

        <div class="form-group">
          <label for="exampleFormControlSelect1">Tipos de Activo</label>
          <select class="form-control" id="exampleFormControlSelect1" [(ngModel)] ="selectedAsset.id" [ngModelOptions]="{standalone: true}">

            <option *ngFor="let tipo of tipos" value={{tipo.id}}>
              {{tipo.nombre}}
            </option>
          </select>
        </div>
      </form>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）