Я не могу отобразить свой продукт angular интерфейс ошибки firebase 'undefined'

Question

Я определил свой интерфейс на странице сведений о продукте, но он все равно не распознает интерфейс. Cutit: undefined, но я определил и импортировал свой интерфейс? Журнал ошибок:

produse.service.ts

  bayonetDoc: AngularFirestoreDocument;

 getBayoneteSolo(id: string) {
    this.bayonetDoc = this.afStore.doc(`bayonete/${id}`);
    return this.bayonetDoc.valueChanges();
  }

Here i call my single product by id , but i can't get the interface informations..

product-details.page.ts

import { CutiteInterface } from "src/app/produse.model";

Cutit: CutiteInterface;

ngOnInit(){
    this.CutitBayonet();
    console.log(this);
}

  CutitBayonet() {
    const ID = this.route.snapshot.paramMap.get("id");
    return this.ProduseService.getBayoneteSolo(ID).subscribe(
      (data) => (this.Cutit = data)
    );
  }

// this is the interface
export interface CutiteInterface {
  id: string;
  title: string;
  description: string;
  stoc: boolean;
  price: number;
  reducere: number;
  image: string;
  tag: string;
  userId: string;
}

And this is where i call HTML:

  {{Cutit.description}}  

Answer 1

Наконец-то ... я исправил свое решение с помощью моей старой функции.

Мне просто нужно было объявить объект из интерфейса

Cutit: CutiteInterface

и использовать эту функцию внутри ngOnInit ();

  this.bayonetID = this.route.snapshot.paramMap.get("id");
    this.ProduseService.GetBayonete().subscribe((products) => {
      this.Cutit = products.find((a) => a.id === this.bayonetID);
      return this.Cutit, console.log(this.Cutit);
    });

Спасибо всем за поддержку!

Answer 2

Вы вызываете this.CutitBayonet() и сразу же записываете this в консоль. Очевидно, что Cutit будет undefined. Начальное значение Cutit не определено до тех пор, пока данные не будут возвращены из вызова функции Asynchronous .

Cutit получит значение только после того, как данные будут возвращены из Firebase.

Также в шаблоне используйте оператор безопасной навигации (?), например:

 <div class="product_descriere">
   {{ Cutit?.description }} 
 </div>