Having a Filter implemented in my Angular Project that fetches data from Firebase.
The current status in the Filter is as follows:
- Name 1: Lea Muster
- Name 2: Bruno Mustermann
- Name 3: Lea Muster
- Name 4: Gabriela Musterfrau
The goal is to show duplicate entries like "Lea Muster" only once in the filter:
- Name 1: Lea Muster
- Name 2: Bruno Mustermann
- Name 4: Gabriela Musterfrau
Seeking advice on displaying unique values only.
Component.ts File:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { AngularFirestore } from '@angular/fire/firestore';
export interface Profile {
topic: string;
location: string;
gender: string;
}
interface Gender {
value: string;
viewValue: string;
}
@Component({
selector: 'app-filtermain',
templateUrl: './filtermain.component.html',
styleUrls: ['./filtermain.component.css'],
})
export class FiltermainComponent implements OnInit {
people: Gender[] = [
{ value: 'mann-0', viewValue: 'Mann' },
{ value: 'frau-1', viewValue: 'Frau' },
{ value: 'norole-2', viewValue: 'Spielt mir keine Rolle' },
];
profile: Profile[] | undefined;
therapykind = new FormControl();
therapyplace = new FormControl();
constructor(private afs: AngularFirestore) {}
ngOnInit(): void {
console.log('Initializing');
this.afs
.collection<Profile>('profiles')
.valueChanges()
.subscribe((values: any) => {
console.log(values);
this.profile = values;
});
}
}Component.html File:
<div>
<h2>Where would you like to have your therapy?</h2>
<mat-form-field appearance="fill">
<mat-label>Choose your favorite location</mat-label>
<mat-select [formControl]="therapyplace" multiple>
<mat-option *ngFor="let profile of profile">
{{ profile.location }}</mat-option
>
</mat-select>
</mat-form-field>
</div>Although I attempted using a pipe, it resulted in errors, so seeking further help.
Thank you!