如何将“搜索”框与角垫表格中的右侧对齐？

编程问答 2022-11-09

问题描述

我正在使用Debug mode，因此Java按钮和mat-card框需要在一行中水平对齐。 我希望add位于左侧，search位于右侧。

我在add之后写过，但是search不在右边。

html

我也遇到错误-search

enter image description here

解决方法

  • 首先，您尝试使用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>

要解决问题的第二个问题，可以直接按照官方故障排除instruction进行操作：

错误：mat-form-field必须包含MatFormFieldControl

当您没有向表单添加表单域控件时，会发生此错误 领域。如果您的表单字段包含本机或 元素，请确保已将matInput指令添加到该元素并具有 导入的MatInputModule。

angularangularformsformsformshtmlmat-table