I'm having a strange error when trying to display 2 columns of an object. The expansion panel displays fine, though it doesn't fill the container like I want it to, but only the first item of the object displays. I know I'm getting the object in console log. I think it's a formatting issue. Any ideas?
<ng-container *ngIf="configurations$ | async as configurations" hideToggle>
<mat-expansion-panel *ngFor="let item of configurations | keyvalue">
<mat-expansion-panel-header>
<div >
<!-- <pre>{{configurations | json}}</pre>-->
<div fxFlexFill fxLayout="row" >
<mat-panel-title fxFlex="30%">
Name of Vaccine: {{item.key}}
</mat-panel-title>
<mat-panel-title fxFlex="70%">
Description: {{item.value.description}}
</mat-panel-title>
</div>
</div>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
</mat-expansion-panel>
</ng-container>
</mat-accordion>
</div>
ts file
import {Component, OnInit, ChangeDetectionStrategy, OnDestroy, ViewChild} from '@angular/core';
import {AngularFirestore} from "@angular/fire/firestore";
import {catchError, map, tap} from "rxjs/operators";
import {of} from "rxjs";
import {MatAccordion} from "@angular/material/expansion";
import {FlexLayoutModule} from "@angular/flex-layout";
@Component({
templateUrl: './vaccine-codes.component.html',
styleUrls: ['./vaccine-codes.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class VaccineCodesComponent implements OnInit, OnDestroy {
@ViewChild(MatAccordion) accordion: MatAccordion;
panelOpenState = false;
configurations$ = this.afs.collection<Vaccine[]>('configurations').doc('CVXCODES').valueChanges()
.pipe(tap(console.log));
dtp$ = this.configurations$.pipe(map((data: Vaccine[]) => {
data?.find((v: Vaccine) => v.Codes?.includes('dtp'))
}),
catchError(err => {
console.error("dtp$", err);
return of([]);
}));
constructor(private afs: AngularFirestore) {
}
ngOnInit(): void {
}
ngOnDestroy() {
}
async getConf() {
try {
const configurations = await this.afs.collection<Configuration>('configurations').doc('CVXCODES').get().toPromise();
} catch (e) {
console.error("getConf error", e)
}
}
}
export interface Configuration {
ChpPrefix: string;
Vaccines: { [key: string]: Vaccine[] };
description: string;
}
export interface Vaccine {
Codes: string[] | null;
}
css
.container {
min-width: 500px;
box-sizing: border-box;
align-items: baseline;
}
.align {
justify-content: space-between;
}
.mat-expansion-panel-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
I know I have a lot to learn especially CSS, but this project has a deadline, so I'm hoping for some quick inspiration.
