0

这是我的 form.html

<form #f="ngForm" (ngSubmit)="save(f.value)">
  <div class="form-group">
    <label for="coffeeHouseName">Názov kaviarňe</label>
    <ng-template #rt ngFor let-cf="result" [ngForOf]="coffeeHouses" let-i="index">
        {{cf?.coffeeHouseName}} {{cf?.city}} {{cf?.street}} {{cf?.streetNumber}} {{cf?.key}}
    </ng-template>
    <input id="coffeeHouseName" type="text" class="form-control" [(ngModel)]="model" name="coffeeHouseId" placeholder="Zadajte názov kaviarňe"
    [ngbTypeahead]="search"
    [resultTemplate]="rt"
    [inputFormatter]="formatter"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
    #instance="ngbTypeahead"
    (selectItem)="itemSelected($event)" />
    <hr>
    <pre>Model: {{ model | json }}</pre>
  </div>
      <button class="btn btn-primary">Pridat hodnotenie</button>
</form>

这是我的组件：

import { RatingService } from './../../rating.service';
import { CoffeeHouse } from './../../models/coffeeHouse';
import { CoffeeHouseService } from './../../coffee-house.service';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { CoffeeTypesService } from '../../coffee-types.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/merge';
import { Subscription } from 'rxjs/Subscription';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
import { Subject } from 'rxjs/Subject';
import { FormControl } from '@angular/forms';
import {startWith} from 'rxjs/operators/startWith';
import {map} from 'rxjs/operators/map';

@Component({
  selector: 'app-add-rating-form',
  templateUrl: './add-rating-form.component.html',
  styleUrls: ['./add-rating-form.component.css']
})
export class AddRatingFormComponent implements OnInit, OnDestroy {
  coffeeTypes$;
  coffeeHouses: CoffeeHouse[];
  subscription: Subscription;
  coffeeRate = 2.5;
  atmosphereRate: number;
  personalRate: number;
  servingRate: number;
  coffeeLookRate: number;
  coffeeSmelRate: number;
  coffeeTasteRate: number;
  ratingAvarge: number;
  advanceRating: true;
  datetime: number;
  status: string;
  public model: any;

  constructor(
    private coffeeTypesService: CoffeeTypesService,
    private coffeeHouseService: CoffeeHouseService,
    private ratingService: RatingService) { 
    this.coffeeTypes$ = coffeeTypesService.getCoffeeTypes();
    this.subscription = coffeeHouseService.getCoffeeHouses().subscribe(coffeeHouses => this.coffeeHouses = coffeeHouses);
  }

  ngOnInit() { }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  @ViewChild('instance') instance: NgbTypeahead;
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200).distinctUntilChanged()
      .merge(this.focus$)
      .merge(this.click$.filter(() => !this.instance.isPopupOpen()))
      .map(term => (term === '' ? this.coffeeHouses : this.coffeeHouses.filter(v => v.coffeeHouseName.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));

      formatter = (x: {coffeeHouseName: string}) => x.coffeeHouseName;

  save(rating) {
    //this.ratingService.saveRatingToDatabase(rating);
    console.log(rating);
  }

}

这是我从 firebase 数据库获取咖啡馆的服务：

import { Injectable } from '@angular/core';
import { AngularFireDatabase, snapshotChanges } from 'angularfire2/database';
import { database } from 'firebase';

@Injectable()
export class CoffeeHouseService {

  constructor(private db: AngularFireDatabase) { }

  getCoffeeHouses(){
    return this.db.list('/coffeeHouses', ref => ref.orderByChild('name'))
    .snapshotChanges()
    .map(actions => {
      return actions.map(action => {
        const data = action.payload.val();
        const key = action.key;
        return { key, ...data };
      });
    });
  }
}

问题：如何从 typeahead 模型中仅获取键值，请参阅屏幕截图了解我需要获取的内容：

NgbTypehead 模型中的屏幕截图键

我只需要获取键值并推送到数据库并在我的 firebase 数据库中得到这样的结果：

firebase 中的屏幕截图键值

4

0 回答 0