Angular mat-expansion-panel内容混乱如何排序及调整为类列表布局？

解决方案 #

1. 排版调整为类列表样式 #

你当前的复选框没有统一容器控制布局，默认行内排列会导致内容多时挤压错乱。首先修改HTML结构，给复选框套一层布局容器：

<div id="persontyp">
  <mat-expansion-panel>
    <mat-expansion-panel-header> Personentypen </mat-expansion-panel-header>
    <!-- 新增容器包裹所有复选框 -->
    <div class="checkbox-container">
      <mat-checkbox *ngFor="let type of allpersonTypes" [value]="type.bezeichnung">
        {{type.bezeichnung}}
      </mat-checkbox>
    </div>
  </mat-expansion-panel>
</div>

同步修改CSS代码，修正原有语法错误，新增列表布局规则：

mat-expansion-panel{
    padding: 5px; /* 修正你之前5x的单位语法错误 */
    width: 400px;
}

/* 复选框列表布局规则 */
.checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 控制两个复选框之间的垂直间距 */
    padding: 8px 4px;
}

调整后所有复选框会垂直排列为规整列表，不会出现挤压错乱的问题。

2. 内容排序方法 #

如果需要对展示的选项排序，可以直接在TS层对绑定的allpersonTypes数组做预排序，无需修改模板逻辑：

// 在获取到allpersonTypes数据后执行排序，以下是按名称正序排序的示例
this.allpersonTypes = this.allpersonTypes.sort((a, b) => {
  // 按bezeichnung字段做字符串本地化排序，适配多语言场景
  return a.bezeichnung.localeCompare(b.bezeichnung);
});

如果需要支持动态切换排序规则，也可以封装为Angular管道用在*ngFor循环中。

内容的提问来源于stack exchange，提问作者ChopperChupss