这是我的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模型中获取键值,请参阅截图以了解我需要获取的内容:
screenshot key in model from NgbTypehead
我只需获取键值并推送到数据库并在我的firebase数据库中得到这样的结果: