Angular 11 + firebase(firestore) 프로젝트 #02 - 데이터 CRUD(Read) -1

이전 자신이 만들어놓았던 Firestore 에 맞게 데이터 이름을 불러와야 한다. 지금 내가 하는거는 저 데이터를 바탕으로 할 것이다.

 

음 일단 난 저 user 이라는 콜렉선의 값을 가져오고싶어. 근데 그냥 가져오는건 이제 재미 없지. 좀 정렬을 넣어볼까?

 

app.component.ts

import { ArrayType } from '@angular/compiler';
import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, CollectionReference } from '@angular/fire/firestore';
import { AngularFireStorage } from '@angular/fire/storage';
import { BehaviorSubject } from 'rxjs';

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

export class AppComponent {
  title = 'bearbookclub';

  private database : AngularFirestore;  // 파이어스토어를 쓸건데 그건 private해야겠지 당연히. database는 내가 지은 이름이고.
  private itemCollection: AngularFirestoreCollection<any>;  //collection을 가져올건데 일단 다 가져와

  collections = new Array();	// 이런 배열을 만들어 놓고
  private storage : AngularFireStorage; // 나중에 쓸 

  tang: object; // 지금 user에 객체 2개가 만들어져있으니까 객체 타입으로 받는다 하고

  constructor(db : AngularFirestore) {  // AngularFirestore을 db라는 이름으로 가져올거고
    this.database = db; // this.database 가 AngularFirestore 이라는 걸 알려주고
    this.getItem('user').subscribe((res)=> {  // 아까 firestore페이지에서 user 라는 collection 만들었었잖아. 그거 구독하자.
      console.log(res);     // F12 눌러서 나오는 콘솔에 내용을 찍어보자
      this.tang = this.database;
      this.collections = res;  
    });
  }

  getItem(db_name : string){  // getItem() 의 인자로 들어가는 이름의 collection에 접근을 할 거라고 설정
    this.itemCollection = this.database.collection<any>(db_name, (ref : CollectionReference) => {
      return ref.orderBy('phone_number','asc');  //시작, 한계점 추가
    });  
    return this.itemCollection.valueChanges();  //리턴
  	}
  }

orderBy 에 'phone_number'을 넣었다는 거는 현재 firestore 콜렉션 user의 필드 중에 phone_number 라는 것이 있지. 그걸 기준으로 정렬을 하겠다는 말이고, 'asc'는 오름차순으로 정렬을 하겠다는 거. 

 

app.component.html

<h2>안녕하세요</h2>
<input type="text" placeholder="이름을 입력하세요" #inputYourName>
<button >등록</button> 

<hr>
<div>
  {{collections}}
</div>

<hr>
<div>
  {{tang}}
</div>

지렸다. 근데 지금 console이 아닌 일반 화면에는 object ㅇㅈㄹ하네... 다음 편에 저거 고쳐봐야겠다