Javascript 如何使用变量制作firebase筛选器？

我想从我的Angular firebase数据库中筛选一些内容。为此，我从一个div中读出了文本。这将为我提供应该过滤我的数据库的文本。我将这个值转移到我的服务中，在那里我想将它作为一个变量使用，并通过这个变量进行过滤，但这不起作用

这是我的服务：

cvSkillCollectionFilter: AngularFirestoreCollection<IntCvSkill>;
  cvSkillCollectionFilterAnwenden: AngularFirestoreCollection<IntCvSkill>;
  cvSkillFilter: Observable<IntCvSkill[]>;
  cvSkillFilterAnwenden: Observable<IntCvSkill[]>;

  filterWert: string;

  constructor(public afs: AngularFirestore) {

    this.filterWert = 'Entwicklung';

    this.cvSkillCollectionFilter = this.afs.collection('cv-skill', ref => ref.where('skillGruppe', '==', this.filterWert));

    this.cvSkillCollectionFilterAnwenden = this.afs.collection('cv-skill');

    this.cvSkillFilter = this.cvSkillCollectionFilter.snapshotChanges().pipe(map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as IntCvSkill;
        data.id = a.payload.doc.id;
        return data;
      });
    }));

    this.cvSkillFilterAnwenden = this.cvSkillCollectionFilterAnwenden.snapshotChanges().pipe(map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as IntCvSkill;
        data.id = a.payload.doc.id;
        return data;
      });
    }));
  }

  getSkillsGefiltert() {
    return this.cvSkillFilter;
  }

  getSkillsFilterAnwenden() {
    return this.cvSkillFilterAnwenden;
  }

  addItem(skill: IntCvSkill) {
    this.cvSkillCollectionFilter.add(skill);
  }

  filtere(filterElement: string) {
    this.filterWert = filterElement;
    console.log(this.filterWert);
  }

以下是应过滤的elemts的componnt.ts文件：

SKILLS: IntCvSkill[];

  constructor(private skillService: CvServiceService) { }

  ngOnInit() {
    this.skillService.getSkillsGefiltert().subscribe(cvSkill => {
      this.SKILLS = cvSkill;
    });
  }

<div *ngIf="SKILLS?.length > 0; else noItem">
  <div *ngFor="let skill of SKILLS">
    <div class="skill">
      <mat-accordion>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>{{skill.skillname}}
            </mat-panel-title>
            <mat-progress-bar class="progress-bar" [value]="skill.skillwert"></mat-progress-bar>
            <mat-panel-description>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div>{{skill.skillBeschreibung}}</div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </div>
</div>

<ng-template #noItem>
  <div>Keine Skills!</div>
</ng-template>

以下是要筛选的属性元素的componnt.html文件：

skillGruppen: IntCvSkill[];
  constructor(private skillService: CvServiceService) { }

  ngOnInit() {
    this.skillService.getSkillsFilterAnwenden().subscribe(cvSkillGruppe => {
      this.skillGruppen = cvSkillGruppe;
    });
   }

   filterAnwenden(filterElement: string) {
     this.skillService.filtere(filterElement);
   }

<div>Filter Gruppen:</div>
<div *ngFor="let skillGruppe of skillGruppen">
  <div (click)="filterAnwenden(filter.textContent)" #filter>{{skillGruppe.skillGruppe}}</div>
</div>

Filter Gruppen:
{{skillGruppe.skillGruppe}}

以下是应过滤的elemts的componnt.ts文件：

SKILLS: IntCvSkill[];

  constructor(private skillService: CvServiceService) { }

  ngOnInit() {
    this.skillService.getSkillsGefiltert().subscribe(cvSkill => {
      this.SKILLS = cvSkill;
    });
  }

<div *ngIf="SKILLS?.length > 0; else noItem">
  <div *ngFor="let skill of SKILLS">
    <div class="skill">
      <mat-accordion>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>{{skill.skillname}}
            </mat-panel-title>
            <mat-progress-bar class="progress-bar" [value]="skill.skillwert"></mat-progress-bar>
            <mat-panel-description>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div>{{skill.skillBeschreibung}}</div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </div>
</div>

<ng-template #noItem>
  <div>Keine Skills!</div>
</ng-template>

{{skill.skillname}
{{skill.skillBeschreibung}}
基恩·斯奇尔斯！

奇怪的是，当我在代码中设置我想自己过滤的值时，它就起作用了。如何更改cvSkillCollectionFilter中filterWert变量的值

更新：

---

问题是，在构造函数中，我无法更新变量filterWert。我现在搜索一个解决方案，如何做到这一点。

文档中对此进行了描述：

使用

主题

作为筛选值，并将此主题映射到查询

private filterWert$ = new Subject<string>();

constructor(public afs: AngularFirestore) {
  this.cvSkillFilter = filterWert$.pipe(
    switchMap(filterWert => 
      this.afs.collection('cv-skill', ref => ref.where('skillGruppe', '==', filterWert)).snapshotChanges()
    ),
    map(changes => changes.map(a => {
      const data = a.payload.doc.data() as IntCvSkill;
      data.id = a.payload.doc.id;
      return data;
    }))
  );
}

getSkillsGefiltert() {
  return this.cvSkillFilter;
}

filtere(filterElement: string) {
  this.filterWert$.next(filterElement);
}

private filterWert$=new Subject（）；
建造商（公共afs:AngularFirestore）{
this.cvSkillFilter=filterWert$.pipe(
开关映射（filterWert=>
此.afs.collection（'cv-skill'，ref=>ref.where（'skillGruppe'，'='，filterWert））.snapshotChanges（）
),
map（changes=>changes.map（a=>{
const data=a.payload.doc.data（）作为IntCvSkill；
data.id=a.payload.doc.id；
返回数据；
}))
);
}
getskillsgefilter（）{
返回此.cvSkillFilter；
}
filtere（filterElement:string）{
this.filterWert$.next（filterElement）；
}

我用一根管子解决了这个问题

  transform(skills: any, skillgruppe: any): any {
    if (skillgruppe === undefined) {
      return skills;
    }
    return skills.filter(skill => {
      return skill.skillGruppe.toLowerCase().includes(skillgruppe.toLowerCase());
    });
  }

所以我可以直接在*ngFor中过滤。要更改值，只需将文本作为变量发送到变量“skillGruppe”

{{skill.skillname}
{{skill.skillBeschreibung}}

Big bruh动量