如何在 angular mat table 中将 'search' 框对齐到右侧？

Question

我正在使用 mat-card 这样 add 按钮和 search 框需要水平对齐在一条线上。我希望 add 在左侧，search 在右侧。

我在 html 之后写了，但是 search 没有对齐到右侧。

<div class="page-container">
    <mat-card class="mat-elevation-z3">
        <mat-card-title>Test Data</mat-card-title>
        <form layout-align='center center' layout='column'>
            <mat-form-field style="justify-content: flex-start">
                <button  mat-raised-button (click)="addClick()" color="primary" mat-raised-button>
                    <mat-icon>add_box</mat-icon>Add
                </button>
            </mat-form-field>
            <mat-form-field style="justify-content: flex-end">
                <input (keyup)="doFilter($event.target.value)" matInput placeholder="Search" type="text">
            </mat-form-field>
        </form>
    </mat-card>
</div>

我也遇到了错误 - ERROR Error: mat-form-field must contain a MatFormFieldControl.

Answer 1

首先，您尝试使用 flexbox，但没有声明 flex 容器。
您需要将 display: flex 添加到父元素，以便其子元素成为 flex 元素。
要将 search 框对齐到最右边，您可以使用 margin-left: auto.

<div class="page-container">
    <mat-card class="mat-elevation-z3">
        <mat-card-title>Test Data</mat-card-title>
        <form layout-align='center center' layout='column' style="display: flex">
            <mat-form-field>
                <button  mat-raised-button (click)="addClick()" color="primary" mat-raised-button>
          <mat-icon>add_box</mat-icon>Add
        </button>
            </mat-form-field>
            <mat-form-field style="margin-left: auto">
                <input (keyup)="doFilter($event.target.value)" matInput placeholder="Search" type="text">
      </mat-form-field>
        </form>
    </mat-card>
</div>

解决你问题的第2个问题，可以直接按照官方问题排查instruction:

Error: mat-form-field must contain a MatFormFieldControl

This error occurs when you have not added a form field control to your form field. If your form field contains a native or element, make sure you've added the matInput directive to it and have imported MatInputModule.

如何在 angular mat table 中将 'search' 框对齐到右侧？

How to align 'search' box to the right side in angular mat table?

html

css

forms

angular

mat-table