angular13 点击表格下拉bug事件

（声明：目前该业务为company内部项目 部分内容不予展示）

好久不见各位 ! 时隔数日我又回来啦 ! ! !
今天带给大家一个工作中可能会遇到的奇怪的bug 废话不多说

上BUG

这是一个简单的表格，我们从Ant Design 中找到angular部分，在里面就可以找到各种组件了；

点击其中一个列表会有个下拉状态

那么bug在哪里呢？ 我们来看着这里

当我们点击操作时，它的下拉状态也被触发了；
其它的两个操作也是


于是，我们·可以基本判断 由于这个组件的问题 它使我们在这个列表的每一个位置都能触发下拉状态；
可是我们进行操作的时候是不需要触发这个状态的，所以在这里我们写一个点击事件给这三个操作

(click)=“showMenu()”

<a nz-icon nz-tooltip="###" nzType="setting" nzTheme="outline"  (click)="showModal()"(click)="showMenu()"></a>
<a nz-icon nz-tooltip="###" nzType="branches" nzTheme="outline" 
   nz-dropdown nzTrigger="click" [nzDropdownMenu]="relation" (click)="showMenu()"></a>
     <nz-dropdown-menu #relation="nzDropdownMenu">
   		<div>
       		<li nz-menu-item >查看日志</li>
    	</div>
      </nz-dropdown-menu>  
<a nz-icon nzType="bars" nzTheme="outline" nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu" (click)="showMenu()</a>
       <nz-dropdown-menu #menu="nzDropdownMenu">
            <div>
              <li nz-menu-item nzDisabled>禁用</li>
              <li nz-menu-item nzDisabled>卸载</li>
              <li nz-menu-item (click)="nodeDel(agent.index)">删除</li>
            </div>
        /nz-dropdown-menu> 

在js中定义一个状态

menu = true;

当点击操作的时候 会触发showMenu() 方法

  showMenu() {
    this.menu = !this.menu;
  }

这样我们点击操作的时候让这个状态为false
nodeOpen(item)是那个下拉状态的一个方法

nodeOpen(item) {    
    //这部分不需要看 是展示下拉状态的内容 
      this.node_open = !this.node_open; 
      if (this.data_open  != item.index) {
        this.node_open = true
      }
      this.data_open = item.index; 
    //到这里 
  }

我们写一个判断，把下拉状态内容的执行限制住

  nodeOpen(item) {    
    if (this.menu) {
    //这部分不需要看 是展示下拉状态的内容 
      this.node_open = !this.node_open; 
      if (this.data_open  != item.index) {
        this.node_open = true
      }
      this.data_open = item.index; 
    //到这里 
    }
  }

这样当我们点击操作的时候menu就为false，也就不会执行下拉了。
但是我们这个操作会让原本直接点击列表触发下拉受到影响 因为我们把menu变为false之后状态无法改回来
我们需要在 if 后面加一个把menu变为true的语句

  nodeOpen(item) {    
    if (this.menu) {
    //这部分不需要看 是展示下拉状态的内容 
      this.node_open = !this.node_open; 
      if (this.data_open  != item.index) {
        this.node_open = true
      }
      this.data_open = item.index; 
    //到这里 
    }
    this.menu = true;
  }
  showMenu() {
    this.menu = !this.menu;
  }

OKOK，这次是小k回归的第一篇文章，望大家多多支持交流前端知识
CSDN 分享你刚写好的bug