css - 使用 Angular 6 将图标添加到 mat-menu 的右上角

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>

组件.css:

mat-icon {
  float: right;
  margin-right: 10px;
}

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

样式.css:

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

供引用的代码示例 - https://codesandbox.io/s/k98pz5l98r