Javascript 如何从单击下拉列表选项中弹出模态

开发者们好，我在这个应用程序中使用angular，现在我正在尝试一个选项 单击以显示模式标记。 基本上，我所做的是创建一个平行模板，该模板等于下拉列表中选择的项目，在该模板上使用a标记设置所有逻辑以显示模式，但是guess不是用户友好型的，因为它会导致额外的点击次数。尝试在选项中设置a标记也是不可行的，因为“我的”下拉列表不起作用。下面是一个关于我所做操作的模拟：

HTML tag

      <select [hidden]="!state" name="optionsInc" required [(ngModel)]="optionsInc" (change)="subItemSelected($event)">
        <option value="select" [ngValue]="null" [disabled]="true">Select Income</option>
        <option *ngFor="let item of allKeysIncomings" label="{{item}}" value="{{item}}"></option>
      </select>====>DROPDOWN LIST LOGIC


    <p [hidden]="!state"> <a *ngIf="incomeSelected"
      href="#"
      class="btn btn-primary btn-block"
      data-toggle="modal"
      data-target="#editItem"
    >{{incomeSelected}}</a>
    </p>====>PARALELL REFERENCE TO POP THE MODAL UP

    <div class="modal fade" id='editItem'>======>MODAL 
      SOME TAGS AND CODE
    </div>

所有这些过程都会在我单击标记a后激活模式，但不是创建对下拉列表的平行引用，我想知道是否可以直接从下拉列表中执行。 我一直在网上关注类似的问题，比如 : 但在我的代码规范上不起作用。

---

有什么最新的想法吗？提前谢谢

如果在

ModalComponent

中有对话框布局的

组件

，则其工作原理如下

从'@angular/core'导入{Injectable}；
从“@angular/material/dialog”导入{MatDialog，MatDialogRef}；
从“./modal/modal.component”导入{ModalComponent}；
@注射的({
providedIn:'根'
})
导出类TestDialogService{
dialogRef:MatDialogRef；
构造函数（公共对话框：MatDialog）{}
开（）{
if（this.dialogRef）{
this.dialogRef.close（）；
}
this.dialogRef=this.dialog.open（ModalComponent{
panelClass:“应用程序对话框”
});
}
关闭（）{
if（this.dialogRef）{
this.dialogRef.close（）；
}
}
}
//html
爱车
选择收入
//ts
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.scss”]
})
导出类AppComponent{
状态=假；
optionsInc=null；
AllKeyIncomings=[
{value:'volvo'，viewValue:'volvo'}，
{value:'saab'，viewValue:'saab'}，
{value:'mercedes'，viewValue:'mercedes'}
];
建造师(
公共testDialogService:testDialogService）{
}
onModelChange（）{
this.testDialogService.open（）；
}
}

---

很抱歉不断地问你，但我在这方面是新手，一个人做这件事非常困难。很抱歉再次不断地问你简单的问题，radik…再次有另一个doubdt…真的很抱歉！！

imports...

@Component({
  selector: 'app-user-sheet-balance',
  templateUrl: './user-sheet-balance.component.html',
  styleUrls: ['./user-sheet-balance.component.css'],
})
export class UserSheetBalanceComponent implements OnInit {

allKeysIncomings: any;==>ITERABLE
incomeSelected: string;

constructor(some code) {}

ngOnInit(): void {some code}

  async subItemSelected(event) {
    SOME CODE
      return (
        await (this.incomeSelected = event.target.value),
     );
  }