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

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

水平仪没有什么比这更好的了。

开关垂直是一个选项“如果”，这

field.properties.stackVertically = true

这是我在说的两张照片：

更新到伟大的答案！！！

参见SUCCESS图像，这是集成了解决方案的上述CODE。

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

现在这是上面的代码，由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