时间戳

首页 > 解决方案 > 错误 RangeError：Object.getApps 超出了最大调用堆栈大小

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

问题描述

我试图使用 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 次）并且过滤也不会发生

1

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

谢谢您的回答

标签： angulartypescriptfirebase

解决方案

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

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

服务

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>

推荐阅读