Telegram WebApp Bot主按钮异常：点击无数据发送或显示异常排查求助

你的代码存在三个关键问题，导致主按钮要么不显示，要么点击无响应：

1. 事件绑定后立即解绑，等于未绑定 #

在checkInputs方法里，你刚用WebApp.onEvent绑定了mainButtonClicked事件，紧接着就调用WebApp.offEvent解绑，这会导致按钮点击时完全没有回调触发。

// 错误写法：绑定后立刻解绑
WebApp.onEvent('mainButtonClicked', this.sendCallback);
WebApp.offEvent('mainButtonClicked', this.sendCallback);

修复：
把事件绑定移到组件初始化逻辑中（比如Angular的ngOnInit），只绑定一次；若必须在checkInputs中处理，需去掉offEvent调用，同时避免重复绑定。

2. 输入框显示条件判断错误 #

当前判断条件if (this.form.controls.street || this.form.controls.city)是检查控件实例是否存在，而非输入框是否有值。无论输入框是否为空，这个条件都会为真，导致按钮显示逻辑混乱。

修复：
改成检查控件的value是否非空：

if (this.form.controls.city.value?.trim() || this.form.controls.street.value?.trim()) {
  // 显示按钮逻辑
} else {
  WebApp.MainButton.hide();
}

3. 回调函数的this指向问题（Angular环境下） #

如果这是Angular组件中的方法，sendCallback作为普通函数被传递时，this会丢失指向组件实例的上下文，导致this.form无法访问，进而无法获取输入值，sendData也可能无法正常执行。

修复：

• 用箭头函数包裹回调：

WebApp.onEvent('mainButtonClicked', () => this.sendCallback());

• 或在构造函数中绑定this：

constructor() {
  this.sendCallback = this.sendCallback.bind(this);
}

修复后的完整示例代码 #

ngOnInit(): void {
  // 初始化时绑定一次事件
  WebApp.onEvent('mainButtonClicked', () => this.sendCallback());
}

sendCallback() {
  const data = {
    city: this.form.controls.city.value?.trim(),
    street: this.form.controls.street.value?.trim(),
    organization: this.form.controls.organization.value?.trim(),
  };
  WebApp.sendData(JSON.stringify(data));
}

checkInputs(): void {
  const hasCity = this.form.controls.city.value?.trim();
  const hasStreet = this.form.controls.street.value?.trim();
  
  if (hasCity || hasStreet) {
    WebApp.MainButton.setParams({ text: 'завершить' });
    WebApp.MainButton.show();
  } else {
    WebApp.MainButton.hide();
  }
}

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