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

Angular2 查询生成器模块工作正常。我在自定义 instructions in the documentation 之后自定义 Angular Material 的样式.我使用 Angular Material 和 Angular FlexLayout 来设计样式。

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

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

这是堆栈 Blitz :

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

这是自定义删除按钮的标记片段:

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

最佳答案

您可以添加一个自定义类来删除规则按钮，然后将其位置设置为绝对位置，如下所示:

在 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;
 }

https://stackoverflow.com/questions/57453596/