如何从单击下拉列表选项中弹出模态 [英] How to pop up a modal from click in dropdown list option

问题描述

美好的一天的开发人员，我正在使用角度应用程序在此应用程序中工作，现在我试图一次单击选项
中的一个，以显示模式标签。
基本上，我所做的是创建一个与下拉菜单中所选项目相同的paralell模板，并使用a标记在该模板上设置了所有逻辑以显示模式，但猜测这不是用户友好的原因尝试在选项内设置标签也是不可行的，因为我的下拉菜单不起作用。以下是关于我所做操作的模拟：

Good day developers , im working in this app with angular , and now im trying to once one of the options get clicked , to show a modal tag . Basically what i did was create a paralell template equal to the item selected on the dropdown , and over this template using the a tag i set all the logic to show the modal, but guess isn't user friendly cause of couple extra clicks.Trying to set the a tag inside the options also wasn't viable cause the my dropdown didn't work.Here a mock about what i did:

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>

然后在我的组件上执行此操作：

then on my component i did this :

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后激活模态，而不是创建对下拉列表的并行引用，而是想知道实际上是否可以直接从下拉列表中进行引用。
我一直在社区中观看一些类似的问题，例如
：使用下拉菜单中的选项打开模态-Angular 2 + ngx
，但不适用于我的代码规范。
对此有任何更新的想法吗？。谢谢！！！

All this process does the task on activate the modal once i click the tag a, but instead of creating that paralell reference to the dropdown, im wondering if is possible to do it straight from the dropdown in fact. I have been watching some similar issues on the comunity like :Open a Modal Using an Option from a Dropdown - Angular 2 + ngx but doesn't work on my code specifications. Any updated idea about this ?.Thanks in advance!!!!!!

推荐答案

如果您有 Component 在 ModalComponent 中具有对话框布局，它应按以下方式工作

if you have Component with dialog layout in ModalComponent it should work as follow

    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();
      }
    }

示例

这篇关于如何从单击下拉列表选项中弹出模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！