Angular 角垫扩展面板：选中复选框时，面板将展开，并且显示的内容将向上移动（附屏幕截图）？

我正在使用基于服务器响应的mat扩展面板处理多角度mat复选框以及其他数据。我可以根据服务响应生成多个mat扩展面板，但每当我单击复选框时，扩展面板中的内容就会向上移动，面板就会展开

---

我已经尝试了

测试用例应该在
mat复选框中。也可以将div替换为span，以便在复选框后单行显示

          <div class="col-md-12" align="center">               
            <mat-checkbox [formControlName]="PI" >
           <span class="col-md-4">
            {{testcase.identifier}}
          </span>
          <span class="col-md-4">
            {{testcase.testTitle}}
          </span>
          <span class="col-md-4">
            {{testcase.vnf}}
          </span>
            </mat-checkbox>
          </div>


{{testcase.identifier}
{{testcase.testTitle}
{{testcase.vnf}}
测试用例应该在
mat复选框中。也可以将div替换为span，以便在复选框后单行显示

          <div class="col-md-12" align="center">               
            <mat-checkbox [formControlName]="PI" >
           <span class="col-md-4">
            {{testcase.identifier}}
          </span>
          <span class="col-md-4">
            {{testcase.testTitle}}
          </span>
          <span class="col-md-4">
            {{testcase.vnf}}
          </span>
            </mat-checkbox>
          </div>


{{testcase.identifier}
{{testcase.testTitle}
{{testcase.vnf}}
我也有同样的问题

最后我发现内容上移是由
标记内没有内容引起的。一旦有内容，复选框就会停留在原来的位置：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-checkbox color="primary" 
    (click)="$event.stopPropagation()">
    CONTENT NEEDED HERE!
    </mat-checkbox>
  </mat-expansion-panel-header>
  Content
</mat-expansion-panel>


这里需要的内容！
内容

这种行为可以在这里并排看到：

它可以通过在标签中添加一个
来解决。
我也有同样的问题

最后我发现内容上移是由
标记内没有内容引起的。一旦有内容，复选框就会停留在原来的位置：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-checkbox color="primary" 
    (click)="$event.stopPropagation()">
    CONTENT NEEDED HERE!
    </mat-checkbox>
  </mat-expansion-panel-header>
  Content
</mat-expansion-panel>


这里需要的内容！
内容

这种行为可以在这里并排看到：

可以通过在标签内添加一个
来解决此问题。
您可以在stackblitz上复制吗。它正在按公认的方式工作，我无法准确复制，因为缺少了一些css文件（我无法添加）。谢谢，event.stopPropagation（）也适用于我，当我在formArray上应用它时，但内容在选择时向上移动，我也应用了css position属性，但当复选框选中时，连接仍然向上移动。你能在stackblitz上复制吗。它正在按公认的方式工作，我无法准确复制，因为缺少了一些css文件（我无法添加）。谢谢，event.stopPropagation（）对我也有效，当我在formArray上应用它时，但内容在选择时向上移动，我也应用了css position属性，但在复选框选择时连接仍向上移动非常感谢，但实际上，在span标记中使用col-md-2时，对齐方式会发生变化，空间也会缩小，这是图像，我已将所有span元素放置在大小为12的div中。请尝试在主div上设置
col-md-12
，在每个span上设置
col-md-4
。我已经尝试过了，但仍然不起作用，我的代码在这里显示标题行的代码，其中包含标识符测试标题VNFI已更新中的代码，但单击某一行时，复选框也会被选中，这样就可以删除此代码。非常感谢，但实际上，在span标记中使用col-md-2时，对齐方式会发生更改，空间也会减少，这是图像，我已将所有span元素放置在大小为12的div中。请尝试在主div上设置
col-md-12
，并在每个span上设置
col-md-4
。我已经尝试过，但仍然不起作用，我的代码在此处显示标题行的代码，其中包含标识符测试标题VNFI已在中更新代码，但单击一行时，复选框也会被选中，这样就可以删除该复选框。