我试图做一个过滤复选框,其中的选项基于数据库中的内容。我似乎找不到无法对过滤器进行硬编码的解决方案。有问题的过滤在这个项目中没有多大意义,但我希望将其用于我正在处理的更大项目。这是我的代码(非常不完整,我正在关注发现的其他一些教程,非常感谢您的帮助!(我对angular非常陌生) filter.component.ts
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import {Router} from '@angular/router';
import { ComicService} from '../comic.service';
import { Comic } from '../comic';
import { HttpClientService } from '../service/http-client.service';
import { Observable } from '../../../node_modules/rxjs';
@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.css']
})
export class FilterComponent implements OnInit {
@Output() filter = new EventEmitter();
comics : Comic[];
filterList : Comic["name"];
constructor(private router: Router, private comicService: ComicService, private httpClientService : HttpClientService ) {}
ngOnInit() {
this.httpClientService.getComics().subscribe(data => {
this.comics = data;
});
this.httpClientService.getFilter().subscribe(data => {
this.filterList = data;
});
this.onFilter();
}
private onFilter() {
this.filter.emit(
this.comics
.filter(opt => opt.checked)
.map(opt => opt.name));
}
gotoFilter(){
this.router.navigate(['/filter']); // define your component where you want to go
}
gotoSearch(){
this.router.navigate(['/search']); // define your component where you want to go
}
}
filter.component.html
<div *ngFor="let comic of filterList">
<label>
<input type="checkbox"
name="options"
value="{{comic.name}}"
[(ngModel)]="comic.checked"
(change)="onFilter()"/>
{{comic}}
</label>
</div>
<div #comicList class="row justify-content-around">
<div *ngFor="let comic of comics" class="card {{comic.name}} initial" style="width: 18rem;">
<img style="height: 200px;" src="{{'data:image/jpeg;base64,'+comic.image}}" class="card-img-top">
<div class="card-body">
<h5 class="card-title">{{comic.name}}</h5>
</div>
</div>
</div>
http-client.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Comic } from '../comic';
@Injectable({
providedIn: 'root'
})
export class HttpClientService {
constructor(
private httpClient:HttpClient
) {
}
getComics()
{
let username='kevin'
let password='password'
const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });
return this.httpClient.get<Comic[]>('http://localhost:8080/comics',{headers});
}
getSearch(string: string)
{
let username='kevin'
let password='password'
const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });
return this.httpClient.get<Comic[]>(`http://localhost:8080/${string}`,{headers});
}
getFilter()
{
let username='kevin'
let password='password'
const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });
return this.httpClient.get<Comic["name"]>(`http://localhost:8080/unique`,{headers});
}
filter.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FilterService {
constructor() { }
filterByCheckboxes(comics) {
comics.filter();
return comics;
}
}