如何使用Angular Material在同一行显示标签和选择框？

Question

我已经使用 Angular Material 搜索将 input 和 label 保持在同一行，但没有得到任何答案。解决方案仅在 html 和 css 中可用，但在这里我需要 Angular 材料方式。

我尝试使用grid 和flex layout 来实现它就像，

示例： https://stackblitz.com/edit/angular-btjbqw-6vykln

      <mat-grid-list cols="10" rowHeight="2:2">
        <mat-grid-tile colspan='2'>
          Lorem ipsum dolor sit amet, an sea similique maiestatis inciderint, decore recusabo sea in. Dolore putant laboramus duo in. Mundi doctus aliquid ut ius. At vero illum vocent vis. Ius eros argumentum cu. 
        </mat-grid-tile>
        <mat-grid-tile colspan='8' fxFlex>
        <mat-form-field  class="input-row" appearance="outline">
            <mat-select placeholder="Expenses" formControlName="expenses" required>
              <mat-option value="1">a</mat-option>
              <mat-option value="2">b</mat-option>
              <mat-option value="3">c</mat-option>
              <mat-option value="4">d</mat-option>
            </mat-select>
        </mat-form-field>
        </mat-grid-tile>    
      </mat-grid-list>

      <mat-grid-list cols="10" rowHeight="2:2">
        <mat-grid-tile colspan='2'>
          Lorem ipsum dolor sit amet, an sea similique maiestatis inciderint. 
        </mat-grid-tile>
        <mat-grid-tile colspan='8' fxFlex>
        <mat-form-field  class="input-row" appearance="outline">
            <mat-select placeholder="Operating Adjustments" formControlName="operatingAdjustments" required>
              <mat-option value="1">e</mat-option>
              <mat-option value="2">f</mat-option>
              <mat-option value="3">g</mat-option>
              <mat-option value="4">h</mat-option>
            </mat-select>
        </mat-form-field>
        </mat-grid-tile>    
      </mat-grid-list>

在这里，对于每个元素，我都在重复 mat-grid-list、mat-grid-title、cols、rowHeight，我认为这不是实现它的正确方法。

在mat-grid-tile 中，我的文本很长，我需要将其作为标签放在左侧，选择框属于右侧。

同样，我有更多案例，因为有些案例有大标签文本，有些可能有小文本。所以选择框需要与它对齐。

我想在没有任何其他库的情况下单独使用 Angular Material 来显示下面给出的这张图片。

使用flexLayout的原因也是为了让整个表单响应式，这也是这个设计的主要重要特征。

可能我对这种方法完全错误，因此也欢迎对示例中的上述代码进行任何修改或不同的方法。

在我的示例中，我有很多用于此设计的代码（主要是重复相同的代码），请帮助我使用一些没有任何性能问题的优化代码来实现结果。

最终的预期结果与上图相同。

Answer 1

这是你想要使用 flex 的布局！

fxLayout.lt-sm="column" 用于小型设备将行转换为列。

<div fxLayout="row" fxLayout.lt-sm="column"  fxLayoutAlign="flex-start center" class="full-width">
  <div fxFlex>
    Lorem ipsum dolor sit amet, an sea similique maiestatis inciderint, decore recusabo sea in. Dolore putant laboramus duo in. Mundi doctus aliquid ut ius. At vero illum vocent vis. Ius eros argumentum cu.
  </div>
  <div fxFlex>
    <div fxLayout="row" fxLayoutAlign="flex-start center" class="full-width">
      <div fxFlex>
        <mat-form-field class="input-row" appearance="outline">
          <mat-select placeholder="Expenses" formControlName="expenses" required>
            <mat-option value="1">a</mat-option>
            <mat-option value="2">b</mat-option>
            <mat-option value="3">c</mat-option>
            <mat-option value="4">d</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="flex-start center" class="full-width">
      <div fxFlex>
        <mat-form-field class="input-row" appearance="outline">
          <mat-select placeholder="Expenses" formControlName="expenses" required>
            <mat-option value="1">a</mat-option>
            <mat-option value="2">b</mat-option>
            <mat-option value="3">c</mat-option>
            <mat-option value="4">d</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div fxFlex>
        Select
      </div>
    </div>
  </div>
</div>

更多详情链接https://github.com/angular/flex-layout/wiki/Responsive-API