У меня есть список из firebase, который я хочу отфильтровать и отобразить по специализациям в каждой категории. Когда я делаю консольный журнал, извлекаются как категории, так и специализации, но я не могу понять, что мне нужно сделать, чтобы отобразить специализацию в пользовательском интерфейсе, когда выбрана категория. Любое руководство будет оценено. Спасибо. Ниже моя работа:
категория.JSON
{ "-Lq2PAU_P-fPniAMrQ85": { "name" : "test" }, "accountingFinance" : { "name" : "Бухгалтерский учет и финансы" }, "assuranceAudit" : { "name" : "Assurance and Audit" }, "управление рисками" : { "название" : "Управление рисками" }, "налогообложение" : { "название" : "Налогообложение" } }
категории.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>
Сервис.тс
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();
}
На данный момент я не получаю никаких ошибок, кроме пустого массива в консоли, когда я выбираю категорию.
category
в вашем примере JSON, но вы используете его в (s.category
) - person Maihan Nijat   schedule 04.10.2019title
,uploaded
). Это важно подчеркнуть. - person peinearydevelopment   schedule 08.10.2019