css - 如何在 Angular 中使用顶部三角形的每个垫表行上的垫子对话框上创建动态自定义样式 - 材料

Question

这是我的示例代码。 请在此处找到我的工作示例代码

我需要在垫子对话框的右上角设置三角形 - Angular。

我在最后一行使用静态 css 获得右上角三角形对话框。但是这里无法在更改请求按钮单击时访问每一行。

下面的代码是对话框组件

openDialog(Id, Currency, Amount, Reason, StatusDescription, payment, event) {

  let targetAttr = event.target.getBoundingClientRect();
const dialogConfig = new MatDialogConfig();

dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;

dialogConfig.data = {
  Id: Id,
  Reason: Reason,
  StatusDescription: StatusDescription
}; 
dialogConfig.position = {
  top: targetAttr.y + targetAttr.height + 10 + "px",
  left: targetAttr.x - targetAttr.width - 20 + "px"
};
  dialogConfig.panelClass = ['my-panel','arrow-top']; 

const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
  data => {
    console.log("Dialog output:", data)
   }
  );
 }

下面的代码来自 style.scss

/* Add application styles & imports to this file! */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";

 .my-panel {
    overflow: hidden !important;
    border-radius: 5px !important;
    padding: 0px !important;
    color: #fff;

 }
  .my-panel.arrow-top {
    margin-top: 40px;
  }
 .my-panel.arrow-top:after {
     content: " ";
     position: absolute;
     right: 100px;
     top: 365px;
     border-top: none;
     border-right: 15px solid transparent;
     border-left: 15px solid transparent;
     border-bottom: 15px solid gray;
    }

我越来越像这样了。

但我希望在更改请求按钮单击事件下的每一行上都有带有上箭头的对话框