プロパティ 'where' は型 'AngularFirestoreCollection<>' に存在しません。（TypeError: this.db.collection(...).where is not a function）

###### 前々々回：[Angularの新規プロジェクト作成手順 - material2とService Workerは使いたい](https://qiita.com/atomyah/items/3e125b072dd74181e582)

###### 前々回：[AngularプロジェクトにFirebaseを導入設定](https://qiita.com/atomyah/items/750d076e3dd5449423fd)

###### 前回：[Angular + FirebaseでCRUD機能を実現](https://qiita.com/atomyah/items/e27c6d2c08f4ac260cfe)




<br>
Firestoreから**where**でデータを読み取る…公式マニュアルのとおりにやっても上記エラーでうまくいきません。ひどいなあ…:sweat:

[コレクションから複数のドキュメントを取得する](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)






### エラーrepro



わたしのサンプルアプリ。

![1554786368264.png](https://qiita-image-store.s3.amazonaws.com/0/307441/cf759b70-2b1b-bc99-2012-cc4abca14ed9.png)

###### app.component.ts

```typescript
export class HomeComponent implements OnInit {


  commentsRef: AngularFirestoreCollection<Comments>;
  comments: Observable<Comments[]>;

  constructor(private db: AngularFirestore, private fb: FormBuilder) {

    this.comments = this.commentsRef.snapshotChanges().pipe
      (map(actions => {
      return actions.map(action => {
        const data = action.payload.doc.data() as Comments;
        const id = action.payload.doc.id;
        return { id, ...data };
        });
      }));      
  }
}
```

<br>
では、この3つのドキュメントがある中から、イニシャルが’Y’のデータのみ**where**で取ってきたいとする。

マニュアルに従い以下のようにコードを変更する。
###### app.component.ts

```typescript
export class HomeComponent implements OnInit {


  commentsRef: AngularFirestoreCollection<Comments>;
  comments: Observable<Comments[]>;

  SearchByInitial: string; // 追加

  constructor(private db: AngularFirestore, private fb: FormBuilder) {
    this.SearchByInitial = 'Y';　// 追加

    this.commentsRef = this.db.collection<Comments>('comments').where('initial', '==', this.SearchByInitial);　// 追加
    this.comments = this.commentsRef.snapshotChanges().pipe
      (map(actions => {
      return actions.map(action => {
        const data = action.payload.doc.data() as Comments;
        const id = action.payload.doc.id;
        return { id, ...data };
        });
      }));      
  }
}
```

すでにVisual Studio Codeがメッセージを…
![1554786711038.png](https://qiita-image-store.s3.amazonaws.com/0/307441/f6e8bb6a-0983-543e-a7cf-05f245451ec1.png)


<br>
保存すると、このとおりのエラー
![1554786770057.png](https://qiita-image-store.s3.amazonaws.com/0/307441/8458c67e-82c9-188b-4ef4-9ce79c78a228.png)

<br>


### さあ修正しよう！

<br>

StackOverflowからたどり着いた。

[Querying Collections in AngularFirestore](https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md)


どうやらこのように書くらしい。

```typescript
afs.collection('items', ref => ref.where('size', '==', 'large'))
```

<br>




で、コードを以下のように直す。

###### app.component.ts

```typescript
export class HomeComponent implements OnInit {


  commentsRef: AngularFirestoreCollection<Comments>;
  comments: Observable<Comments[]>;

  SearchByInitial: string;　 // 追加

  constructor(private db: AngularFirestore, private fb: FormBuilder) {
    this.SearchByInitial = 'Y';　 // 追加

    this.commentsRef = this.db.collection<Comments>('comments', ref => ref.where('initial', '==', this.SearchByInitial))　　　 // 変更
    this.comments = this.commentsRef.snapshotChanges().pipe
      (map(actions => {
      return actions.map(action => {
        const data = action.payload.doc.data() as Comments;
        const id = action.payload.doc.id;
        return { id, ...data };
        });
      }));      
  }
}
```


<br>
### 結果

![1554787350753.png](https://qiita-image-store.s3.amazonaws.com/0/307441/1369d2a1-5b61-06a6-416b-1d155a0984bb.png)

イニシャルが'Y'のドキュメントだけ表示された。

<br>


HTMLの方はいじっていない。
検索されるドキュメントがひとつしかないとわかっていても書き方は同じ。

```html
<tr *ngFor="let item of comments | async">
    <td>{{ item.id }}</td>
    …以下略…
    
```
※コード全文は[前回記事](https://qiita.com/atomyah/items/e27c6d2c08f4ac260cfe)をご覧ください。

<br>

### おまけ

別にIDをとってくる必要なければsnapshotChanges()を使う必要ないので以下のようにvalueChange()でもっと簡単に書けます。

```typescript

export class HomeComponent implements OnInit {


  commentsRef: AngularFirestoreCollection<Comments>;
  comments: Observable<Comments[]>;

  SearchByInitial: string;　 // 追加

  constructor(private db: AngularFirestore, private fb: FormBuilder) {
    this.SearchByInitial = 'Y';　 // 追加

    this.commentsRef = this.db.collection<Comments>('comments', ref => ref.where('initial', '==', this.SearchByInitial))
    this.comments = this.commentsRef.valueChanges();

}
```
<br>


以上