Angular标签切换回调内if语句不生效的原因是什么

问题根因 #

你写的判断逻辑不生效、打不出hello日志，逃不出下面几个原因：

• 事件对象取值错误/类型不匹配
  你用===做严格相等判断，但首先要确认你拿到的evt对象真的有index属性、且index是数字类型：
  如果你没正确导入MatTabsModule、或者模板上有其他事件冒泡干扰，evt很可能是原生DOM事件对象，这时候evt.index是undefined，undefined === 0永远返回false；如果evt.index是字符串格式的"0"，严格判断和数字0相等也会不成立。
• setTimeout闭包拿到错误的事件对象
  你把核心逻辑放在1秒延迟的setTimeout里，要是1秒内快速切换多次标签，等回调执行时，闭包里拿到的evt永远是最后一次切换的事件对象，如果你最后停在第二个标签，所有回调里的evt.index都是1，自然进不去第一个分支。
• 接口字段解构拼写错误导致代码中断
  你写的解构参数是{tool,beuty}，beuty是拼写错误（常规字段命名是beauty），如果接口实际返回的字段名和你写的不匹配，解构出来的值是undefined，就算进了if分支，执行slice时会直接抛JS错误，后面的console.log('hello')根本跑不到。
• 默认选中首标签不会触发变更事件
  mat-tab-group初始化默认选中第一个标签的动作，不会触发selectedTabChange事件，只有你主动从其他标签切回第一个标签时事件才会抛出，指望页面刚加载就进第一个if分支是不可能的。

修复步骤 #

1. 先在函数入口打日志确认事件结构，不要瞎猜参数：

   onScrollDown(evt:any) {
     console.log('触发事件，index值：', evt.index, '类型：', typeof evt.index);
     // 原有逻辑
   }
   

2. 修正逻辑，提前存好tab索引值、转成数字类型，修正接口字段拼写，解决闭包问题：

   i=18;
   
   onScrollDown(evt:any) {
     // 提前存值转数字，避免闭包、类型问题导致判断失效
     const activeIndex = Number(evt.index);
     setTimeout(()=>{
       console.log(this.i)
       // 注意这里的字段名要和后端实际返回的完全一致，拼错了直接报错
       this.api.getApi().subscribe(({tool, beauty}) => {
         if (activeIndex === 0) {
           this.beu=beauty.slice(0,this.i+=15);
           console.log('hello');
         }  
         if(activeIndex === 1){
           this.tools=tool.slice(0,this.i+=15);
         }
       })
     },1000);
   }
   

3. 如果需要页面初始化就加载第一个标签的内容，在ngOnInit生命周期里主动调用加载逻辑，不要等tab事件触发。

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