Siema,
mam pewien duży problem. Stworzyłem bazę danych z tabelą Pet. W tej tabeli mam psy i koty. Mam tam też kolumnę species, dla rozróżnienia czy obiekt to kot, czy pies.
Teraz chciałbym zrobić, żeby wyświetlały się tylko psy. I tutaj pojawia się problem.
Serwis, komunikujący się z backendem
export class PetServiceService {
private url = 'http://localhost:5000/api/pet';
constructor(private http: HttpClient) { }
getPets(): Observable<Pet[]>{
return this.http.get<Pet[]>(this.url);
}
}
HTML
<div class="card m-2 hover-overlay" style="width: 15rem;" *ngFor="let pet of pets | async" [routerLink]="['/pet-details', pet.id]">
<img [src]="pet.photo" class="card-img-top" alt="dog" style="height: 160px;">
<div class="card-body bg-warning">
<p class="card-text text-center h5" id="petName">{{pet.name}}</p>
</div>
</div>
TypeScript
export class DogsToAdoptListComponent implements OnInit {
pets: Observable<Pet[]>;
constructor(private http: PetServiceService) { }
ngOnInit() {
this.pets = this.http.getDogs().pipe(
map(dogs => dogs.filter(dog => dog.species === 'Pies'))
);
}
}
Ogólnie jestem w stanie wyświetlić wszystkie zwierzęta i to działa. Ale gdy staram się skomponować kod, który wyświetli mi tylko psy - pojawia się problem
this.pets = this.http.getDogs().pipe(
map(dogs => dogs.filter(dog => dog.species === 'Pies'))
);
Sprawdziłem, że to rozwiązanie zwraca mi pustą listę.
Czy ktoś wie dlaczego? I jak to naprawić? Kombinuję już na wszelkie sposoby i już nie wiem, co jest z tym nie tak. Help