为什么Firestore数据检索在ng-serve版本中有效，但在ng-build版本中失败

Question

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

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

预期的行为是一个包含3个产品名称的列表出现在下拉列表的下方(从Firestore集合加载)。

TypeScript：

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。