如何在表格組中不垂直對齊角度+材質墊復選框？

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