กรองรายการตามหมวดหมู่ - เชิงมุม 8

ฉันมีรายการจาก firebase ที่ฉันต้องการกรองและแสดงความเชี่ยวชาญพิเศษในแต่ละหมวดหมู่ เมื่อฉันทำบันทึกคอนโซล ทั้งหมวดหมู่และความเชี่ยวชาญพิเศษจะถูกดึงข้อมูล แต่ฉันไม่สามารถเข้าใจได้ว่าฉันต้องทำอะไรเพื่อแสดงความเชี่ยวชาญพิเศษใน UI เมื่อเลือกหมวดหมู่ คำแนะนำใด ๆ จะได้รับการชื่นชม ขอบคุณ. ด้านล่างเป็นงานของฉัน:

Category.JSON

{ "-Lq2PAU_P-fPniAMrQ85" : { "name" : "test" }, "accountingFinance" : { "name" : "การบัญชีและการเงิน" }, "AssuranceAudit" : { "name" : "Assurance and Audit" }, "riskManagement" : { "ชื่อ" : "การบริหารความเสี่ยง" }, "ภาษี" : { "ชื่อ" : "ภาษี" } }

หมวดหมู่ JSON

{
  "accountingFinance" : [ null, "Accounting Management Information Systems", "Accounting Records Maintenance", "Accounts Preparation", "Accountancy / Finance Training" ],
  "assuranceAudit" : [ null, "Asset Management Review", "Assurance / Audit Training", "Climate Change / Sustainability Audit", "Enviromental Audit" ],
  "riskManagement" : [ null, "Acturial Service", "Enterprise Risk Management", "Fraud Risk Management", "Political Risk Management" ],
  "taxation" : [ null, "Business Income Tax", "Capital Gains Tax", "Corporation Tax", "Employee Tax (PAYE)", "Export Incentives" ]
}

มาร์กอัป HTML

<div class="row">
                            <div class="col-4">
                                <div class="list-group">
                                    <a 
                                        *ngFor="let c of (category$ | async)" 
                                        routerLink="/admin/expert-category" [queryParams]="{ category: c.key }"
                                        class="list-group-item list-group-item-action"
                                        [class.active]="category === c.key">
                                        {{ c.name }}
                                    </a>
                                </div>
                            </div>
                            <div class="col">
                                <div class="row">
                                    <ng-container *ngFor="let categories of filteredCategories; let i = index">
                                        <div class="col">
                                            <div class="card">
                                                <!--<div class="card-body">-->
                                                    <ul class="list-group list-group-horizontal">
                                                        <li class="list-group-item">{{ categories }}</li>
                                                    </ul>
                                                <!--/div>-->
                                            </div>
                                        </div>
                                        <div  *ngIf="(i+1) % 4 === 0" class="-w-100"></div>
                                    </ng-container>     
                                </div>
                            </div>
                        </div>

บริการ.ts

getCategories(): Observable<any[]> {
    return this.db.list('/categories')
    .snapshotChanges().pipe(
      map(actions =>
        actions.map(data => ({ key: data.key, ...data.payload.val() }))
    ));
  }

  getAll(): Observable<any[]> {
    return this.db.list('/category')
    .snapshotChanges().pipe(
      map(category =>
        category.map(cat => {
            const key = cat.key;
            const payload = cat.payload.val();
            return { key, ...payload };
          })),
        );
  }

ไฟล์ Component.ts

export class ExpertCategoryComponent implements OnInit {
  category$;
  category: string;
  closeResult: string;
  filteredCategories: any[] = [];
  specialization: any[] = [];

  constructor(
    private categoryService: CategoryService,
    route: ActivatedRoute,
    private router: Router,
    private modalService: NgbModal) {

      this.categoryService.getCategories().subscribe(specialization => {
        this.specialization = specialization;
        console.log(this.specialization);
        route.queryParamMap.subscribe(params => {
          this.category = params.get('category');

          this.filteredCategories = (this.category) ? this.specialization.filter(s => s.category === this.category) : this.specialization;
          console.log(this.filteredCategories);
          });
      });

      this.category$ = this.categoryService.getAll();
  }

ฉันไม่ได้รับข้อผิดพลาดใดๆ ในขณะนี้ ยกเว้นอาร์เรย์ว่างในคอนโซลเมื่อฉันเลือกหมวดหมู่