为什么 Firestore 数据检索在 ng-serve 版本上工作但在 ng-build 版本上失败

Question

我有一个有趣的问题，当我使用 ng-serve 在本地部署我的应用程序时，我可以加载数据而没有任何问题或错误，但是一旦我执行 ng-deploy 并打开网页，相同的数据就不会加载到页面上，没有明显错误。

实时应用：https://padder-939bc.firebaseapp.com/catalogue

预期的行为是在下拉列表下方显示 3 个产品名称的列表（从 Firestore 集合加载）。

打字稿：

export class ProductFeedComponent implements OnInit {
  constructor(private seo: SeoService, private db: AngularFirestore) { }

  //import arrays of products
  products;
  filteredProducts;

  //filter types
  colour;
  room;
  brand;
  style; 
  price;

  documentField: string;

  //filters
  maxFilters = 5;
  selectedFilters;

  filters = [];
  filterValues = [];

  //model values

  ngOnInit() {
    this.seo.generateTags({
      title: 'Product Feed',
      description: 'A catalogue filled with products.'
    });

    this.filteredProducts = this.db.collection('products').valueChanges();
    console.log(this.filteredProducts);
  }

  filterProducts(colourValue: string, brandValue: string, roomValue: string, priceValue: string, styleValue: string){
    this.selectedFilters = 0;
    this.filters = [];
    this.filterValues = [];

    //workout how many filter parameters are required
    if (colourValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('colour');
      this.filterValues.push(colourValue);
    }

    if (brandValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('brand');
      this.filterValues.push(brandValue);
    }

    if (roomValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('room');
      this.filterValues.push(roomValue);
    }

    if (priceValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('price');
      this.filterValues.push(priceValue);
    }

    if (styleValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('style');
      this.filterValues.push(styleValue);
    }
    console.log(this.filters);
    console.log(this.filterValues);
    //apply filters based on selected criteria
    if(this.selectedFilters == 1)
    {
      this.filteredProducts = this.db.collection('products', ref => ref.where(this.filters[0], '==', this.filterValues[0])).valueChanges();
    }

    else if(this.selectedFilters == 2)
    {
      this.filteredProducts = this.db.collection('products', ref => ref.where(this.filters[0], '==', this.filterValues[0]).where(this.filters[1], '==', this.filterValues[1])).valueChanges();
    }   
  }


  //remove filters
  removeFilter(){
    this.filteredProducts = this.db.collection('products').valueChanges();
    this.selectedFilters = 0;
    this.filters = [];
    this.filterValues = [];
  }

HTML:

<p>Catalogue Page</p>

<h4>Filter by Colour</h4>
<select [(ngModel)]="colour" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="blue">Blue</option>
    <option value="black">Black</option>
    <option value="white">White</option>
</select>

<h4>Filter by Brand</h4>
<select ng [(ngModel)]="brand" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<h4>Filter by Price</h4>
<select [(ngModel)]="price" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<h4>Filter by Room</h4>
<select [(ngModel)]="room" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<h4>Filter by Style</h4>
<select [(ngModel)]="style" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<button *ngIf="colour" (click)="removeFilter()">
    Remove Filter
</button>

<div *ngFor="let product of filteredProducts | async">
    <h6>{{ product.productName }}</h6>
    <ul>
        <li>Colour: {{ product.colour }}</li>
    </ul>
</div>

Answer 1

仔细检查您的 firebase config 以确保您连接到正确的数据库。您可能有不同的 enviornment.ts for dev 和 for prod。

为什么 Firestore 数据检索在 ng-serve 版本上工作但在 ng-build 版本上失败

Why does Firestore data retrieval work on ng-serve version but fails in ng-build version

angularfire2

angular

google-cloud-firestore