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

Question

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

Angular2查询生成器模块工作正常。我正在按照自定义instructions in the documentation自定义角度材料的样式。我使用Angular材质和Angular FlexLayout进行造型。

我想将"remove“按钮(红色的X)一直移动到flex行的右侧，移到"value”字段的右侧。

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

​

​

下面是stackblitz：

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

下面是定制remove按钮的标记片段：

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

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