如何在表格组中不垂直对齐角度+材质垫复选框？

Question

我有两种情况：

一个，就是我在使用FORM GROUP的同时使用angular 5 + Angular Material Design。

这是我的多个复选框的代码

<div *ngSwitchCase="'checkboxField'" class="checkbox-field">
  <div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
    <div class="checkbox-label" *ngFor="let
         element of field?.elements">
         <mat-checkbox
        [value]="element?.properties.value"
        [disabled]="field?.properties.disabled"
        [checked]="isItemChecked(element?.properties.value)"
        (change)="onCheckboxChange(element?.properties.value);
        notifyFormOfChange($event);">
        {{element?.properties.title}}
    </mat-checkbox>
  </div>
</div>

有两种显示方式：

1）水平 2）垂直

仅在具有多个复选框或单选按钮（也需要修复）的表单组中才发生垂直。当我不使用表单组而只是放置复选框或单选按钮时，我会有CBX或RB的行，它们之间没有空格。

当此属性设置为true时，我需要垂直堆叠CHECKBOXES：

field.properties.stackVertically = true

我只能使用CSS做到这一点。

这是表单组的CSS

.row[_ngcontent-c30] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

水平仪没有这样的东西。

Switch VERTICAL是一个“ IF”选项

field.properties.stackVertically = true

以下是我所谈论的两张照片：

更新至最佳答案！

查看成功图片，这是集成解决方案的上方代码。

我必须将SOLUTION放在第二行，而不是我认为必须的位置。有点试验和错误，但有效！！！

现在这是KimCindy回答的上面的代码！谢谢！

  <div *ngSwitchCase="'checkboxField'" class="checkbox-field">
    ***<div class="cb-wrapper" [ngClass]="{'cb-vertical': field?.properties?.stackVertically }">***
         <div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
      <div class="checkbox-label" *ngFor="let
           element of field?.elements">

           <mat-checkbox
          [value]="element?.properties.value"
          [disabled]="field?.properties.disabled"
          [checked]="isItemChecked(element?.properties.value)"
          (change)="onCheckboxChange(element?.properties.value);
          notifyFormOfChange($event);">
          {{element?.properties.title}}
      </mat-checkbox>
    </div>
  ***</div>***
</div><!--checkbox-->

Answer 1

也许您可以尝试 ngClass 指令。

请参见以下示例：

HTML：

<div class="cb-wrapper" [ngClass]="{'cb-vertival': !tmp }">
<mat-checkbox>Check 1</mat-checkbox>
<mat-checkbox>Check 2</mat-checkbox>
<mat-checkbox>Check 3</mat-checkbox>
<div>

CSS：

.cb-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  flex-flow: row;
}

.mat-checkbox {
  margin-left:20px;
} 

.cb-vertival {
  flex-flow: column;
}

TS：

export class CheckboxLayoutExample {
tmp : boolean = false;
}

Stackblitz： https://stackblitz.com/edit/angular-addm8z?file=app%2Fcheckbox-overview-example.css