2017-07-01 9 views
1

NgModelがこのコンポーネントで動作していません。私はすでにFormsModuleとstuffをインポートしました。 * ngIfやangled * ngForのような他の機能は他のコンポーネントでうまく機能しています。 app.moduleもチェックしてください。角4 NgModelがデータを結合していません

ヘルプ!

私はfirebaseとangularfire2を使用しています。

マイコンポーネント:

import { Component, OnInit } from '@angular/core'; 
 
import { ActivatedRoute, Params } from '@angular/router'; 
 
import { CommonModule } from '@angular/common'; 
 

 
import { AngularFireAuth } from 'angularfire2/auth'; 
 
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database'; 
 
import * as firebase from 'firebase/app'; 
 

 
import { Rating } from '../rating'; 
 

 
import 'rxjs/add/operator/SwitchMap'; 
 

 
@Component({ 
 
    selector: 'app-view-rating', 
 
    templateUrl: './view-rating.component.html', 
 
    styleUrls: ['./view-rating.component.css'] 
 
}) 
 

 
export class ViewRatingComponent implements OnInit { 
 

 
    name: any; 
 
    rating: FirebaseObjectObservable<any>; 
 
    user: firebase.User; 
 
    item: any; 
 

 
    constructor(
 
     private route: ActivatedRoute, 
 
     private afAut: AngularFireAuth, 
 
     private afDb: AngularFireDatabase) { 
 
      this.afAut.authState.subscribe((auth) => { 
 
       this.user = auth; 
 
      }) 
 
     } 
 

 
    ngOnInit(): void { 
 
     this.name = this.route.snapshot.paramMap.get('item'); 
 
     this.rating = this.afDb.object(this.user.uid + '/' + this.name); 
 
     console.log(this.rating) 
 
    } 
 
}

そしてHTML:

<div class="form-container"> 
 

 
    <div *ngIf="rating" > 
 
     <input [(ngModel)]="rating.name" name="name" > 
 
    </div> 
 
    
 
</div>

+0

ブラウザコンソールでエラーが発生していますか? – Aravind

+0

@Aravindいいえ、コンソールに何も表示されない –

+0

@Aravind私はこれを成功せずに試しましたが、もう一度試してみました。簡単な間違いだった。私は角度に新しいです。どうもありがとうございます。 –

答えて

0

ratingのタイプがあるobservablengModelのためにどのように使用しますか?あなたは、それを購読し、他のオブジェクトに割り当てるとngModel

は、任意のではなく、以下のように観察型のオブジェクトを宣言し

ratingObject:any; 

this.rating = this.afDb.object(this.user.uid + '/' + this.name); 
this.rating.subscribe(data =>{ 
     this.ratingObject = data; 
}); 

、その後、以下のようにHTMLで使用して、そのオブジェクトを使用する必要があります

<div *ngIf="ratingObject" > 
    <input [(ngModel)]="ratingObject.name" name="name" > 
</div> 
関連する問題