格式化垫扩展面板时遇到问题

Question

即使我将宽度设置为 100%，我的扩展面板也没有填满容器的整个宽度。有什么想法可以让它填充可用 space 吗？我尝试创建一个 stackblitz。我不明白为什么什么都没有显示 https://angular-hikqnf.stackblitz.io 我的 ts 文件

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";

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

我的模板

  <mat-accordion class="align">
<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 fxLayout="row"  fxLayoutAlign="space-between">
            <mat-panel-title class="name" fxFlex="30%" >
              Name of Vaccine: {{item.key}}
            </mat-panel-title>
            <mat-panel-title class="description" 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>

我的 scss 文件


.mat-expansion-panel {
  width: 100%;
  min-height: 60px;

}

sounds so simple but nothing I have tried works.

Answer 1

您的 stackblitz 中似乎缺少 BrowserAnimationsModule 导入，这就是没有显示任何内容的原因。

解决后，您的 mat-expansion 面板似乎占据了容器的整个宽度。

如果我不明白这个问题，请告诉我，我会仔细研究。

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

格式化垫扩展面板时遇到问题

having trouble formatting mat-expansion panel

angular

mat-expansion-panel