Question

我正在使用mat-menu。

<mat-menu #appMenu="matMenu" yPosition="above">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

我要单击more_vert图标，应该在其顶部打开mat-menu。并且应该在Mat-menu 的右上角添加一个图标在此图像的右上角应该是一个图标，并应放在more_vert图标的顶部。

任何人都可以帮我怎么做。

为表格添加了代码。由于表格数据中包含mat-menu。

 <table class="table">
          <thead>
            <tr>
              <th>Data 1
              </th>
              <th>Data 2
              </th>
              <th>Data 3
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of Data</td>

              <td>
              {{data.val1}}
              </td>
              <td>
               {{data.val2}}
              </td>
              <td>
                      <mat-menu #appMenu="matMenu">
                          <mat-icon>close</mat-icon>
                          <button mat-menu-item>Settings</button>
                          <button mat-menu-item>Help</button>
                        </mat-menu>

                        <button mat-icon-button [matMenuTriggerFor]="appMenu">
                          <mat-icon>more_vert</mat-icon>
                        </button>
              </td>
            </tr>
          </tbody>
        </table>

Answer 1

要获得预期结果，请使用以下选项

component.ts

<mat-menu #appMenu="matMenu" yPosition="above">
  <mat-icon class="icon">close</mat-icon>
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

component.css：

mat-icon {
  float: right;
  margin-right: 10px;
}

.icon {
  position: relative;
  top: 14px;
  right: -10px;
  z-index: 9999;
}

style.css：

.cdk-overlay-container {
  position: relative;
  top: -70px;
}

代码示例以供参考-https://codesandbox.io/s/k98pz5l98r

使用Angular 6在垫菜单的右上角添加图标

1 个答案: