Angular 弹性布局表单字段拉伸整个宽度

Question

我有以下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>

生成了下面的布局

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

目标布局（不完美）

Answer 1

你能试试这个吗？

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

您应该考虑使用 Gaps...

Answer 2

  <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 容器流中该元素的大小调整。

Angular 弹性布局表单字段拉伸整个宽度

Angular Flex layout form fields stretch whole width

angular-flex-layout

angular