Angular Flex 布局表单字段拉伸整个宽度答案

【问题标题】：Angular Flex layout form fields stretch whole widthAngular Flex 布局表单字段拉伸整个宽度
【发布时间】：2020-05-03 13:14:00
【问题描述】：

我有以下 html

    <div fxLayout="row" fxLayoutAlign="space-between center">
      <mat-chip-list>
        <mat-chip>{{ type | titlecase }} count : {{ count }}</mat-chip>
        <mat-chip *ngIf="filtersActivated" [removable]="true" (removed)="removeFilters()"
          >Filters
          <mat-icon matChipRemove *ngIf="filtersActivated">cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
      <form>
        <mat-form-field>
          <mat-label>Field</mat-label>
          <mat-select>
            <mat-option>None</mat-option>
            <mat-option *ngFor="let hint of hints" [value]="hint.field">{{ hint.label }}</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
          <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
        </mat-form-field>
      </form>
      <div matTooltip="Select filter(s)" *ngIf="displayFilters">
        <button mat-mini-fab color="primary" (click)="openFilterTool()">
          <mat-icon aria-label="Filter settings">search</mat-icon>
        </button>
      </div>
    </div>

它生成了以下布局

我想创建一个中间表单覆盖整个中间空间的布局。我如何使用 Angular flexlayout 做到这一点？

目标布局（不完美）

【问题讨论】：

你试过 FxFlex 并赋予它宽度吗？看到这个tburleson-layouts-demos.firebaseapp.com/#/docs

标签： angular angular-flex-layout

【解决方案1】：

  <mat-form-field fxFlex>
          <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
          <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
        </mat-form-field>

fxFlex 指令应该用于 fxLayout 容器中的元素，并标识该元素在 flexbox 容器流中的大小调整。

【讨论】：

【解决方案2】：

你能试试这个吗？

<div fxLayout fxLayoutAlign="start center">
  <mat-chip-list>
    <mat-chip>{{ type | titlecase }} count : {{ count }}</mat-chip>
    <mat-chip *ngIf="filtersActivated" [removable]="true" (removed)="removeFilters()"
      >Filters
      <mat-icon matChipRemove *ngIf="filtersActivated">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
  <form fxFlex fxLayout fxLayoutAlign="start center">
    <mat-form-field>
      <mat-label>Field</mat-label>
      <mat-select>
        <mat-option>None</mat-option>
        <mat-option *ngFor="let hint of hints" [value]="hint.field">{{ hint.label }}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field fxFlex>
      <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
      <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
    </mat-form-field>
  </form>
  <div matTooltip="Select filter(s)" *ngIf="displayFilters">
    <button mat-mini-fab color="primary" (click)="openFilterTool()">
      <mat-icon aria-label="Filter settings">search</mat-icon>
    </button>
  </div>
</div>

您应该考虑使用间隙...

【讨论】：