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

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;==>ITERABLEincomeSelected: 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

    import { Injectable } from '@angular/core';

    import { MatDialog, MatDialogRef } from '@angular/material/dialog';

    import { ModalComponent } from './modal/modal.component';

    @Injectable({

      providedIn: 'root'

    })

    export class TestDialogService {

      dialogRef: MatDialogRef<ModalComponent, any>;

      constructor(public dialog: MatDialog) { }

      open() {

        if(this.dialogRef) {

          this.dialogRef.close();

        }

        this.dialogRef = this.dialog.open(ModalComponent, {

          panelClass: 'app-dialog'

        });

      }

      close() {

        if(this.dialogRef) {

          this.dialogRef.close();

        }

      }

    }

    // html

    <mat-form-field>

      <mat-label>Favorite car</mat-label>

      <select name="optionsInc"

        matNativeControl 

        [(ngModel)]="optionsInc" 

        (ngModelChange)="onModelChange()">

        <option value="select" [value]="null" [disabled]="true">Select Income</option>

        <option *ngFor="let item of allKeysIncomings" [label]="item.viewValue" 

          [value]="item.value"></option>

      </select>

    </mat-form-field>

    // ts

    @Component({

      selector: 'app-root',

      templateUrl: "./app.component.html",

      styleUrls: ["./app.component.scss"]

    })

    export class AppComponent {

      state = false;

      optionsInc = null;

      allKeysIncomings = [

        {value: 'volvo', viewValue: 'Volvo'},

        {value: 'saab', viewValue: 'Saab'},

        {value: 'mercedes', viewValue: 'Mercedes'}

      ];

      constructor(

        public testDialogService: TestDialogService) {

      }

      onModelChange() {

        this.testDialogService.open();

      }

    }