Angular 2中点击AddNewQuantity选项后如何显示弹窗

首先得指出你现有代码里的两个小问题：一是用了(click)事件绑定在<select>上，这会导致每次点击下拉框展开时就触发方法，而不是选中选项后才触发；二是<hr>和<br>放在<select>里是无效的HTML，浏览器会忽略这些标签，建议用<optgroup>来做选项分组。

下面是完整的实现方案：

1. 调整下拉框的HTML结构与事件绑定 #

把原来的(click)换成(change)事件（只有选中选项时才触发），同时清理无效标签，用合理的方式组织选项：

<select class="form-control" id="quantity" 
        (change)="onChangequantity($event)" 
        [(ngModel)]="model.quantity" 
        name="quantity" #quantity="ngModel">
  <option value="addquantity">
    <i class="fa fa-plus" aria-hidden="true"></i> Add New Quantity
  </option>
  <!-- 用optgroup做选项分组，替代无效的hr/br -->
  <optgroup label="Existing Quantities">
    <option>Kg</option>
    <!-- 这里可以添加更多预设数量选项 -->
  </optgroup>
</select>

2. 在Component中实现弹窗逻辑 #

这里分两种常见场景：使用Angular Material的弹窗组件，或者自定义模态框。

场景一：使用Angular Material MatDialog（推荐） #

如果你的项目已经引入了Angular Material，这是最便捷的方式：

首先在组件中导入依赖：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
// 导入你预先创建的弹窗组件（比如AddQuantityDialogComponent）
import { AddQuantityDialogComponent } from './add-quantity-dialog/add-quantity-dialog.component';

然后注入MatDialog并实现方法：

constructor(private dialog: MatDialog) { }

onChangequantity(event: Event) {
  // 获取选中的选项值
  const selectedValue = (event.target as HTMLSelectElement).value;
  
  if (selectedValue === 'addquantity') {
    // 打开弹窗，可配置宽度、传递数据等
    const dialogRef = this.dialog.open(AddQuantityDialogComponent, {
      width: '400px',
      data: { /* 可以传递给弹窗的初始化数据，比如默认值 */ }
    });

    // 监听弹窗关闭事件，处理新增后的逻辑（比如刷新下拉选项）
    dialogRef.afterClosed().subscribe(newQuantity => {
      if (newQuantity) {
        console.log('新增的数量：', newQuantity);
        // 这里可以把新增的数量添加到下拉选项列表中
        // 例如：this.quantityOptions.push(newQuantity);
      }
      // 重置下拉框选中值，避免停留在「Add New Quantity」
      this.model.quantity = '';
    });
  }
}

场景二：自定义模态框（无需第三方库） #

如果不想用第三方库，可以自己写一个简单的模态框：

首先在当前组件的HTML末尾添加弹窗模板：

<!-- 自定义模态框，通过isModalOpen控制显示隐藏 -->
<div class="modal-overlay" *ngIf="isModalOpen" (click)="closeModal()">
  <div class="modal-content" (click)="$event.stopPropagation()">
    <h3>Add New Quantity</h3>
    <input type="text" [(ngModel)]="newQuantity" placeholder="Enter quantity name" class="form-control">
    <div class="modal-actions">
      <button class="btn btn-primary" (click)="saveNewQuantity()">Save</button>
      <button class="btn btn-secondary" (click)="closeModal()">Cancel</button>
    </div>
  </div>
</div>

添加基础样式（可以放在组件的CSS文件中）：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
}

.modal-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

然后在Component中实现逻辑：

isModalOpen = false;
newQuantity = '';
// 假设你有一个预设选项数组（如果需要动态更新下拉选项）
quantityOptions = ['Kg'];

onChangequantity(event: Event) {
  const selectedValue = (event.target as HTMLSelectElement).value;
  
  if (selectedValue === 'addquantity') {
    this.isModalOpen = true;
    // 重置下拉框选中值
    this.model.quantity = '';
  }
}

saveNewQuantity() {
  if (this.newQuantity.trim()) {
    // 将新增的数量添加到选项列表
    this.quantityOptions.push(this.newQuantity.trim());
    this.closeModal();
  }
}

closeModal() {
  this.isModalOpen = false;
  this.newQuantity = '';
}

如果用动态选项的话，下拉框的选项可以改成*ngFor渲染：

<optgroup label="Existing Quantities">
  <option *ngFor="let qty of quantityOptions">{{qty}}</option>
</optgroup>

内容的提问来源于stack exchange，提问作者Sudharsan Venkatraj