Angular2查询构建器模块删除按钮布局答案

【问题标题】：Angular2 query builder module remove button layoutAngular2查询构建器模块删除按钮布局
【发布时间】：2019-12-18 14:02:27
【问题描述】：

我正在使用 Angular Query Builder module 在 Angular 8 中构建搜索 UI。

Angular2 查询构建器模块工作正常。我正在按照自定义 instructions in the documentation 自定义 Angular Material 的样式。我正在使用 Angular Material 和 Angular FlexLayout 进行样式设置。

我想将 flex 行右侧的“删除”按钮（红色 X）一直移动到“值”字段的右侧。

flexLayout 设置应该按顺序并排显示所有元素。但是，尽管它是 flex 行中的最后一个元素，但仍应用了某种样式，将其放置在左侧。我尝试了 margin-left 和其他样式，但无法弄清楚如何让 X 一直到右侧。

这里是堆栈闪电战：

https://stackblitz.com/edit/angular-aqyt4u?file=src/app/app.component.ts

这里是自定义删除按钮的标记sn-p：

<!-- Query Builder -->
<query-builder [(ngModel)]='recordsQuerySet' [config]='config'>
  <!-- Override remove button -->
  <ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
    <div fxFlex>
      <button type="button" mat-icon-button color="accent" (click)="removeRule(rule)">
        <mat-icon>clear</mat-icon>
      </button>
    </div>
  </ng-container>
  <!-- etc -->
</query-builder>

【问题讨论】：

我也有同样的问题。你找到解决方案了吗？

标签： css angular angular-flex-layout

【解决方案1】：

你可以添加一个自定义类来移除规则按钮，然后设置它的绝对位置，如下所示：

在 html 文件中：

<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)" class="remove-rule-btn">
    <mat-icon>clear</mat-icon>
</button>

在 css/scss 文件中：

.remove-rule-btn{
    position: absolute;
    right: 5px;
 }

【讨论】：