Firebase以选择形式显示数据 - 角度

Question

我正在尝试以选择形式显示来自表格英雄和“名词”的数据 这是客户的名字。

在我的第二个表格中，我想在向它们添加产品时展示它们 将客户归于他们。

谁能帮我解决这个问题？我是角度新手:)

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { HeroesService } from '../../services/heroes.service';
import { HeroeModel } from '../../models/heroe.model';
import {AngularFireDatabase } from 'angularfire2/database';

import Swal from 'sweetalert2';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: HeroeModel[] = [];
  cargando = false;

  constructor(private heroesService: HeroesService) {}

  ngOnInit() {
    this.cargando = true;
    this.heroesService.getHeroes().subscribe(resp => {
      this.heroes = resp;
      this.cargando = false;
    });
  }

  borrarHeroe(heroe: HeroeModel, index: number) {
    Swal.fire({
      title: 'Uwaga!',
      text: `Czy chcesz trwale usunąć kontrahenta ${heroe.nombre}?`,
      type: 'warning',
      showConfirmButton: true,
      showCancelButton: true
    }).then(resp => {
      if (resp.value) {
        this.heroesService.deleteHeroe(heroe.id).subscribe(resp => {
          this.heroes.splice(index, 1);
        });
      }
    });
  }
}

add-products.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import Swal from 'sweetalert2';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import { ADDProductsModel } from 'src/app/models/add-products.model';
import { ProductsService } from 'src/app/services/products.service';
import { HeroesComponent } from 'src/app/pages/heroes/heroes.component';
import { HeroeComponent } from 'src/app/pages/heroe/heroe.component';

@Component({
  selector: 'app-add-products',
  templateUrl: './add-products.component.html',
  styleUrls: ['./add-products.component.css']
})
export class ADDProductsComponent implements OnInit {

  ADDProducts: ADDProductsModel = new ADDProductsModel();

  constructor(
    private ProductsService: ProductsService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');

    if (id !== 'new') {
      this.ProductsService.getADDProducts(id).subscribe((resp: ADDProductsModel) => {
        this.ADDProducts = resp;
        this.ADDProducts.id = id;
      });
    }
  }

  guardar(form: NgForm) {
    if (form.invalid) {
      console.log('Nieprawidłowy format');
      return;
    }

    Swal.fire({
      title: 'Ładowanie',
      text: 'Trwa zapis...',
      type: 'info',
      allowOutsideClick: false
    });

    Swal.showLoading();

    let peticion: Observable<any>;

    if (this.ADDProducts.id) {
      peticion = this.ProductsService.actualizarADDProducts(this.ADDProducts);
    } else {
      peticion = this.ProductsService.crearADDProducts(this.ADDProducts);
    }

    peticion.subscribe(resp => {
      Swal.fire({
        title: this.ADDProducts.number,
        text: 'Dodano pomyślnie',
        type: 'success'
      });
    });
    console.log(form);
    console.log(this.ADDProducts);
  }
}

Answer 1

• 首先，考虑组件交互中的父子通信模型。为方便起见，我不会在此处包含任何 firebase 部分。我假设您正在使用 firebase Data 非常好。

现在您的问题是如何将数据从孩子发送回父母，所以这是您的解决方案。

完整的解决方案见StackBlitz Link

• app.component.html

   <div>
        <span > Name comes form child in Parent Component </span>
        <select>
            <option> Select Name </option>    
            <option *ngFor="let item of nameFromChild"> {{item}} </option>
        </select>
   </div>
  

• app.component.ts

   export class AppComponent  {
          nameFromChild: string[] = []; // your property.
          /*
              nameFromChildFun() is called when there is data emitted from child-component. 
              @parms ='nameFromChild' : gets parameter from child using $event from app.component.html.
          */
          nameFromChildFun(nameFromChild){
                 this.nameFromChild.push(nameFromChild); //name pushes to property. and displaying in select tag using *ngFor. 
          }
   }
  

• child.component.html

   <input type ="text" [(ngModel)]="name"> <br><br>
   <button (click)="sendNameToParent(name)"> Add Name to Parent </button>
  

• child.component.ts

   import { Component, EventEmitter, Output } from '@angular/core';
  
   export class ChildComponent implements OnInit {
          @Output() nameFromChild = new EventEmitter();
          // nameFromChild is passed in app.component.html in <app-child (nameFromChild)="nameFromChildFun($event)
  
          sendNameToParent(name){
               this.nameFromChild.emit(name); // emitting value to parent.
          }
   }
  

• 现在当用户在 childComponent 的 addNameToParent 按钮中单击时，在此处调用您的 firebase 服务以先保存并更新数据，然后将这些数据加载到父 app.component 中。