Question

我正在尝试在购物应用中实施评分系统，但是在尝试打开页面时收到错误控制台。

控制台上的错误是：

函数Query.where（）需要有效的第三个参数，但未定义。 -它指向：

this.stars = this.starService.getProductStars（this.movieId）

AND

const starsRef = this.afs.collection（'stars'，ref => ref.where（'movieId'，'=='，movieId））;

下面是我的代码：

rating.page.html：（我在其中放置了两个组件，分别是TestRate和Star-Review）

<ion-content>

 <app-testrate></app-testrate>

 <app-star-review-component></app-star-review-component>

</ion-content>

testrate.component.html：

<div *ngIf="movie | async as m">

<h1>
 {{m.title}}
</h1>

<img [src]="m.image" width="100px">

<p>
 {{m.plot}}
</p>

 <star-review [movieId]="movieId" [userId]="userId"></star-review>

</div>

testrate.component.ts：

export class TestrateComponent implements OnInit {

userDoc: AngularFirestoreDocument<any>;
movieDoc: AngularFirestoreDocument<any>;

user: Observable<any>;
movie: Observable<any>; 

constructor(private afs: AngularFirestore) { }

ngOnInit() {
this.userDoc = this.afs.doc('users/test-user-3')
this.movieDoc = this.afs.doc('movies/battlefield-earth')

this.movie = this.movieDoc.valueChanges()
this.user = this.userDoc.valueChanges()
}

get movieId() {
return this.movieDoc.ref.id
}

get userId() {
return this.userDoc.ref.id
}

}

star-review.component.html：

<h3>Average Rating</h3>

{{ avgRating | async }}

<h3>Reviews</h3>

<div *ngFor="let star of stars | async">

{{ star.userId }} gave {{ star.movieId }} {{ star.value }} stars

</div>


<h3>Post your Review</h3>

<fieldset class="rating">
 <ng-container  *ngFor="let num of [5, 4, 3, 2, 1]">
  full star
  <input (click)="starHandler(num)" 
        [id]="'star'+num"
        [value]="num-0.5"
        name="rating" 
        type="radio" />

  <label class="full" [for]="'star'+num"></label>

  half star
  <input (click)="starHandler(num-0.5)" 
         [value]="num-0.5"
         [id]="'halfstar'+num" 
         name="rating" 
         type="radio"  />

  <label class="half" [for]="'halfstar'+num"></label>

 </ng-container>
</fieldset>

star-review.component.ts：

export class StarReviewComponentComponent implements OnInit {

@Input() userId;
@Input() movieId;

stars: Observable<any>;
avgRating: Observable<any>;

constructor(private starService: StarService) { }

ngOnInit() {
this.stars = this.starService.getProductStars(this.movieId)
this.avgRating = this.stars.pipe(map(arr => {
  const ratings = arr.map(v => v.value)
  return ratings.length ? ratings.reduce((total, val) => total + val) / arr.length : 'not reviewed'
}))
}

starHandler(value) {
this.starService.setStar(this.userId, this.movieId, value)
}

}

star.service.ts：

export class StarService {

constructor(private afs: AngularFirestore) { }

// Star reviews that belong to a user
getUserStars(userId) {
const starsRef = this.afs.collection('stars', ref => ref.where('userId', '==', userId));
return starsRef.valueChanges();
}

// Get all stars that belog to a Product
getProductStars(movieId) {
const starsRef = this.afs.collection('stars', ref => ref.where('movieId', '==', movieId));
return starsRef.valueChanges();
}

// Create or update star
setStar(userId, movieId, value) {

// Star document data
const star: Star = { userId, movieId, value };

// Custom doc ID for relationship
const starPath = `stars/${star.userId}_${star.movieId}`;

// Set the data, return the promise
return this.afs.doc(starPath).set(star)

}

}

函数Query.where（）需要一个有效的第三个参数，但在尝试查看页面时未定义

0 个答案: