在 mat-grid-list 中使用 rowspan 和 colspan 元素未正确显示答案

【问题标题】：Elements are not showing properly using rowspan and colspan in mat-grid-list在 mat-grid-list 中使用 rowspan 和 colspan 元素未正确显示
【发布时间】：2020-10-02 07:48:22
【问题描述】：

我是 Angular 的新手。我正在尝试创建一种无法获得预期输出的表单。
我将所有切换都集中在一行中。我尝试了很多东西，但得到这样的输出：

以及我在页面上绘制的预期输出：

我试过了：

<mat-grid-list cols="2" rowHeight="100px">
                <mat-grid-tile rowspan="2" class="mr-1">
                    <div fxLayout="row" fxLayoutAlign="start start">
                        <mat-label style="margin-right: 20px">Is Active?</mat-label>
                        <mat-slide-toggle formControlName="isActive"></mat-slide-toggle>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start start">
                        <mat-label style="margin-right: 20px">Is Supplier?</mat-label>
                        <mat-slide-toggle formControlName="isSupplier"></mat-slide-toggle>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start start">
                        <mat-label style="margin-right: 20px">Is Customer?</mat-label>
                        <mat-slide-toggle formControlName="isCustomer"></mat-slide-toggle>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start start">
                        <mat-label style="margin-right: 20px">Is Cashbook A/C?</mat-label>
                        <mat-slide-toggle formControlName="isCashbook"></mat-slide-toggle>
                    </div>
                </mat-grid-tile>
                <mat-grid-tile class="ml-1">
                    <mat-form-field appearance="outline" fxFlex>
                        <mat-label>Country</mat-label>
                        <input name="country" formControlName="country" matInput required>
                    </mat-form-field>
                </mat-grid-tile>        
            </mat-grid-list>
            <mat-grid-list cols="2" rowHeight="100px">

                <mat-grid-tile class="ml-1">
                    <mat-form-field appearance="outline" fxFlex>
                        <mat-label>Phone</mat-label>
                        <input name="phone" formControlName="phone" matInput required>
                    </mat-form-field>
                </mat-grid-tile>        
            </mat-grid-list>

【问题讨论】：

标签： html angular typescript angular-material

【解决方案1】：

您可以使用嵌套的row/col 布局来完成此任务。

<div fxLayout="row" fxLayoutAlign="start start">
   <div fxLayout="column" fxFlex="50">
      <div>Where Height 100%</div>
   </div>
   <div fxLayout="column" fxFlex="50">
     <div>Where Height 50%</div>
     <div>Where Height 50%</div>
   </div>
</div>

【讨论】：