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

Question

好日子开发人员，我在这个应用程序中工作与角度，现在我试图一旦其中一个选项被点击，以显示一个模态标签。基本上，我所做的是创建一个与下拉列表中选择的项目相等的paralell模板，并且在此模板上使用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>

然后在我的组件上，我这样做了：

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),

     );

  }

所有这些过程都会在单击标记a后激活模式时执行任务，但是不是创建对下拉列表的paralell引用，而是想知道是否有可能直接从下拉列表中执行此操作。我一直在社区上看到一些类似的问题，例如：使用下拉列表中的选项打开模态 - Angular 2 + ngx，但不适用于我的代码规范。关于这个的任何更新的想法？提前致谢!!!!!!

Answer 1

如果你有对话框布局，它应该工作如下ComponentModalComponent&nbsp; &nbsp; import { Injectable } from '@angular/core';&nbsp; &nbsp; import { MatDialog, MatDialogRef } from '@angular/material/dialog';&nbsp; &nbsp; import { ModalComponent } from './modal/modal.component';&nbsp; &nbsp; @Injectable({&nbsp; &nbsp; &nbsp; providedIn: 'root'&nbsp; &nbsp; })&nbsp; &nbsp; export class TestDialogService {&nbsp; &nbsp; &nbsp; dialogRef: MatDialogRef<ModalComponent, any>;&nbsp; &nbsp; &nbsp; constructor(public dialog: MatDialog) { }&nbsp; &nbsp; &nbsp; open() {&nbsp; &nbsp; &nbsp; &nbsp; if(this.dialogRef) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.dialogRef.close();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; this.dialogRef = this.dialog.open(ModalComponent, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; panelClass: 'app-dialog'&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; close() {&nbsp; &nbsp; &nbsp; &nbsp; if(this.dialogRef) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.dialogRef.close();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; // html&nbsp; &nbsp; <mat-form-field>&nbsp; &nbsp; &nbsp; <mat-label>Favorite car</mat-label>&nbsp; &nbsp; &nbsp; <select name="optionsInc"&nbsp; &nbsp; &nbsp; &nbsp; matNativeControl&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; [(ngModel)]="optionsInc"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; (ngModelChange)="onModelChange()">&nbsp; &nbsp; &nbsp; &nbsp; <option value="select" [value]="null" [disabled]="true">Select Income</option>&nbsp; &nbsp; &nbsp; &nbsp; <option *ngFor="let item of allKeysIncomings" [label]="item.viewValue"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [value]="item.value"></option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </mat-form-field>&nbsp; &nbsp; // ts&nbsp; &nbsp; @Component({&nbsp; &nbsp; &nbsp; selector: 'app-root',&nbsp; &nbsp; &nbsp; templateUrl: "./app.component.html",&nbsp; &nbsp; &nbsp; styleUrls: ["./app.component.scss"]&nbsp; &nbsp; })&nbsp; &nbsp; export class AppComponent {&nbsp; &nbsp; &nbsp; state = false;&nbsp; &nbsp; &nbsp; optionsInc = null;&nbsp; &nbsp; &nbsp; allKeysIncomings = [&nbsp; &nbsp; &nbsp; &nbsp; {value: 'volvo', viewValue: 'Volvo'},&nbsp; &nbsp; &nbsp; &nbsp; {value: 'saab', viewValue: 'Saab'},&nbsp; &nbsp; &nbsp; &nbsp; {value: 'mercedes', viewValue: 'Mercedes'}&nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; constructor(&nbsp; &nbsp; &nbsp; &nbsp; public testDialogService: TestDialogService) {&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; onModelChange() {&nbsp; &nbsp; &nbsp; &nbsp; this.testDialogService.open();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }