ОШИБКА RangeError: превышен максимальный размер стека вызовов в Object.getApps

Question

Я пытался отфильтровать список заголовков с помощью 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 раз) , а также фильтрация не происходит

Кажется, эта ошибка вызвана модулем filer. Я могу получить любую информацию о том, как исправить эту ошибку ...

Спасибо за ваш ответ

Answer 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>