错误 RangeError：Object.getApps 超出了最大调用堆栈大小答案

【问题标题】：ERROR RangeError: Maximum call stack size exceeded at Object.getApps错误 RangeError：Object.getApps 超出了最大调用堆栈大小
【发布时间】：2020-05-28 13:52:51
【问题描述】：

我试图使用 Ng2SearchPipeModule 过滤标题列表。我已经在 app.module.ts 中导入了这个模块，然后生成了新的搜索栏组件

searchbar.component.ts

import { FirebaseService } from './../../firebase.service';
import { AngularFirestore } from '@angular/fire/firestore';
import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-searchbar',
  templateUrl: './searchbar.component.html',
  styleUrls: ['./searchbar.component.css']
})

export class SearchbarComponent implements OnInit{
constructor(private fireService:FirebaseService){}

titles:Array<any>;
  InputText:string;
  ngOnInit(){
    this.gettitles();
  }

  gettitles(){
    this.fireService.read_titles().subscribe(result =>{
      this.titles = result;
      console.log(this.titles);
    })
  }
}

而我的 searchbar.component.html 看起来像这样

  <div class="search-field">
    <mat-form-field>
      <mat-label>Search</mat-label>
      <input id="input" type="text" matInput placeholder="" autocomplete="off" [(ngModel)]=InputText>
      <div><i class="fas fa-search"></i></div>
    </mat-form-field>
  </div>

  <div class="SearchTitles">
    <tbody>
      <tr *ngFor="let title of titles | filter:InputText">
        <td>{{title.payload.doc.data().title}}</td>
      </tr>
    </tbody>
  </div>

我的 Firebase Firestore 输出正确。但是每当我在输入元素上键入任何键时，我都会收到此错误（我输入了 7 个字符，我收到此错误 7 次），并且过滤也不会发生

这个错误似乎是由于文件管理器模块造成的。我可以获得有关如何修复此错误的任何信息...

感谢您的回答

【问题讨论】：

您正在更新组件中的相同标题？
您正在任何地方更新组件中的标题？
你能分享 this.fireService.read_titles() 中的代码吗，因为我认为这个函数应该返回标题而不是对 firebase 文档的引用。
请检查我的新答案，如果您仍然同意，请告诉我

标签： angular typescript firebase

【解决方案1】：

我认为问题在于您的标题不是字符串数组。将标题数组更改为字符串数组：

服务中的函数可以返回实际的标题：

服务

constructor(private afs: AngularFirestore) { }

read_titles() {
    return this.afs.collection<{title: string}>('here-your-table').valueChanges().pipe(
        map(list => list.map(v => v.title))
    )
}

组件的 TS：

  gettitles(){
    this.fireService.read_titles()
  }

在你的 html 中：

  <tr *ngFor="let title of titles | async | filter:InputText">
    <td>{{title}}</td>
  </tr>

【讨论】：