[英]How can I make a variable the name of an element from firebase and alter the new variable?
[英]How can I make a firebase filter with a variable?
我想從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);
}
函數“ filtere()”更改變量“ filterWert”的值。 這可以正常工作,因為當我進行console.log記錄時,我得到了正確的值,但是cvCollectionFilter內部的值沒有變化,我也不知道為什么。
這是要過濾的屬性的元素的compont.ts文件:
skillGruppen: IntCvSkill[];
constructor(private skillService: CvServiceService) { }
ngOnInit() {
this.skillService.getSkillsFilterAnwenden().subscribe(cvSkillGruppe => {
this.skillGruppen = cvSkillGruppe;
});
}
filterAnwenden(filterElement: string) {
this.skillService.filtere(filterElement);
}
這是應該過濾的elemts的componont.ts文件:
SKILLS: IntCvSkill[];
constructor(private skillService: CvServiceService) { }
ngOnInit() {
this.skillService.getSkillsGefiltert().subscribe(cvSkill => {
this.SKILLS = cvSkill;
});
}
這是要過濾的屬性的元素的compont.html文件:
<div>Filter Gruppen:</div>
<div *ngFor="let skillGruppe of skillGruppen">
<div (click)="filterAnwenden(filter.textContent)" #filter>{{skillGruppe.skillGruppe}}</div>
</div>
這是應該過濾的elemts的componont.ts文件:
<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>
奇怪的是,當我在代碼中設置要通過mySelf過濾的值時,它就可以工作。 如何更改cvSkillCollectionFilter內部的filterWert變量的值?
更新:問題是,在構造函數中我無法更新變量filterWert。 我現在正在尋找一種解決方案。
在文檔中進行了描述: 動態查詢 。
使用Subject
作為您的過濾器值,然后將此主題映射到您的查詢。
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);
}
我用管道解決了問題。
transform(skills: any, skillgruppe: any): any {
if (skillgruppe === undefined) {
return skills;
}
return skills.filter(skill => {
return skill.skillGruppe.toLowerCase().includes(skillgruppe.toLowerCase());
});
}
因此,我可以直接過濾* ngFor。 要更改該值,只需將文本作為變量發送到變量“ skillGruppe”
<div *ngIf="SKILLS?.length > 0; else noItem">
<div *ngFor="let skill of SKILLS | filter:skillGruppe">
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.