Извлечение данных из модели в переменные

Question

Я новичок в машинописи и angular, и я пытался извлечь некоторые данные из firebase, используя angularfire2, и назначить их переменным для использования в некоторых других функциях позже. Я знаком только с javascript точечной нотацией, где я получаю доступ к членам объекта с использованием точечной нотации, кажется, что она не работает с angular Может кто-нибудь, пожалуйста, помогите мне с извлечением данных из модели в переменные, пожалуйста,

Мне все еще трудно понять Observable и подписывается тоже.

код

модель

export class Reacts {
  sad?: number;
  happy?: number;
  neutral?: number;
}

service

import { Injectable } from "@angular/core";
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument
} from "angularfire2/firestore";
import { Reacts } from "../models/reacts";
import { Observable } from "rxjs";
@Injectable({
  providedIn: "root"
})
export class ReactService {
  mapCollection: AngularFirestoreCollection<Reacts>;
  reacts: Observable<Reacts[]>;

  constructor(public afs: AngularFirestoreDocument) {
    this.reacts = this.afs.collection("reacts").valueChanges();
  }

  getItems() {
    return this.reacts;
  }
}

компонент

import { Component, OnInit } from "@angular/core";
import { Reacts } from 'src/app/models/reacts';
import { ReactService } from 'src/app/services/react.service';

@Component({
  selector: "app-reacts",
  templateUrl: "./reacts.component.html",
  styleUrls: ["./reacts.component.css"]
})
export class ReactsComponent implements OnInit {


  react: Reacts[];
  happy: number;
  sad: number;
  neutral:number;


  constructor(private reactsService: ReactService ) {}

  ngOnInit(): void {
    this.reactsService.getItems().subscribe(reacts => {
      this.react = reacts;
      console.log(reacts); //this works print an array object of data from database
      this.happy= reacts.happy// what i'm trying to achieve
    });
  }

}

Answer 1

Хорошо, я сломаю это для вас. Вы пытаетесь получить доступ к .happy, но на самом деле это массив React[]

  ngOnInit(): void {
    this.reactsService.getItems().subscribe((reacts:Reacts[]) => { // Note I have defined its model type
      this.react = reacts;
      console.log(reacts); //this works print an array object of data from database
      //this.happy= reacts.happy // Now VS code will show you error itself
      this.happy = reacts[0].happy; 
    });
  }

Сила Typscript заключается в его строгой типизации языка. Если вы внесете изменения, как показано ниже, в сервисном коде VS сам объяснит вам ошибку:

export class ReactService {
  mapCollection: AngularFirestoreCollection<Reacts>;
  reacts: Observable<Reacts[]>;

  constructor(public afs: AngularFirestoreDocument) {
    this.reacts = this.afs.collection("reacts").valueChanges();
  }

  getItems(): Observable<Reacts[]> { // added return type
    return this.reacts;
  }
}

Как только я предоставлю тип возврата getItems(), вам даже не придется определять тип в .subscribe((reacts:Reacts[]) как я сделал в вашем компоненте.