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});
}
过滤器.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class FilterService {
constructor() { }
filterByCheckboxes(comics) {
comics.filter();
return comics;
}
}
解决方案
推荐阅读
- excel - 使用 VBA Excel 宏自动填充工作表顺序
- javascript - 尽管已连接,但我的 SCSS 文件无法正常工作,并且 firefox 开发人员编辑向我显示所有属性都正常
- python - 发送 HTTP 多部分/表单数据响应
- r - 如何在整个向量上运行一组条件
- python - 使用 boto3 列出 SNS 主题
- grpc-go - 如何在不使用 http 协议中使用 oltp 导出器的 opentelemtry 收集器的情况下将跟踪直接发送到 Web 服务?
- python - 单击时放大子图(带有 inset_axes 图)
- regex - TCL期望用expect_out重新获取子字符串
- azure - Azure 的事件网格的回复策略似乎不起作用
- ios - 在 App Store 上从订阅模式转变为付费模式