Saya memiliki daftar dari firebase yang ingin saya filter dan menampilkan spesialisasi di bawah setiap kategori. Ketika saya melakukan log konsol, kategori dan spesialisasi diambil, tetapi saya tidak tahu apa yang perlu saya lakukan untuk merender spesialisasi di UI ketika kategori dipilih. Bimbingan apa pun akan dihargai. Terima kasih. Di bawah ini adalah pekerjaan saya:
kategori.JSON
{ "-Lq2PAU_P-fPniAMrQ85" : { "name" : "test" }, "accountingFinance" : { "name" : "Akuntansi dan Keuangan" }, "assuranceAudit" : { "name" : "Assurance dan Audit" }, "Manajemen risiko" : { "nama" : "Manajemen Risiko" }, "pajak" : { "nama" : "Perpajakan" } }
kategori.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" ]
}
Markup 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>
Layanan.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 };
})),
);
}
File komponen.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();
}
Saya tidak mendapatkan kesalahan apa pun saat ini kecuali array kosong di konsol ketika saya memilih kategori.
category
dalam contoh JSON Anda tetapi Anda menggunakannya di (s.category
) - person Maihan Nijat   schedule 04.10.2019title
,uploaded
). Itu adalah sesuatu yang penting untuk disoroti. - person peinearydevelopment   schedule 08.10.2019