core.js:6014 ERROR TypeError: Cannot set property ‘record’ of undefined

I’m getting this error : core.js:6014 ERROR TypeError: Cannot set property ‘record’ of undefined

I’m getting output in console but no output in html.

anyone know how to filter cloud firestore data in angular please suggest me how to do it.

please help me how to solve

TS file

import { AngularFirestore } from "@angular/fire/firestore";
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-product",
  templateUrl: "./product.component.html",
  styleUrls: ["./product.component.css"],
})
export class ProductComponent implements OnInit {
  
  record: any;

  constructor(private db: AngularFirestore) {}

  ngOnInit() {
   
    this.db
      .collection(
        "Products",
        (ref) => ref.where("Price", "<", 100).where("Title", "==", "egg"))
      .get()
      .subscribe(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          // doc.data() is never undefined for query doc snapshots
          console.log(doc.data());

**ERROR**          this.record = doc.data();

        });
      });
  }
}


HTML FILE

<div class="container">
  <div class="row" style="margin-top: 25px;">
    <div class="col-md-3"></div>
    <div class="card" style="width: 18rem;" *ngFor="let item of record">
      <div class="card-body">
        <h5 class="card-title">Product name: {{ item.Title }}</h5>
        <h6 class="card-subtitle mb-2 text-muted">
          seller id: {{ item.Seller }}
        </h6>
        <p class="card-text">price: {{ item.Price }}</p>
      </div>
    </div>
  </div>
</div>

Source: Angular Questions