Angular 动态角度滤波器

我试图创建一个过滤复选框，其中的选项基于来自数据库的内容。我似乎找不到一个解决方案，过滤器没有硬编码。问题中的过滤在这个项目中没有什么意义，但我希望它能在我正在进行的更大的项目中发挥作用。这是我的代码（非常不完整，我正在学习我找到的其他教程，如果有任何帮助，我将不胜感激！（我对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>

---

你能简单地加上你想要达到的目标和你面临的问题吗？我想显示一个按名称筛选的漫画列表。我想将其扩展到多个属性（如亚马逊产品搜索）稍后但现在，我只想了解如何根据数据库中的唯一值动态生成过滤器复选框，并根据复选框中标记的内容过滤前端显示的内容。为此，基于漫画书角色的名称。提前感谢！好的，分享你的

过滤器列表

。如果你这是您在stackbiltz中迄今为止所做的工作，因为它更容易提供帮助这很困难，因为我正在调用我的SQL数据库。您可以在

filterList

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});
  }

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FilterService {

  constructor() { }
  filterByCheckboxes(comics) {
    comics.filter();
    return comics;
  }
}