ngx chips中blur事件与提交请求的竞态条件问题咨询

这个问题我之前也碰到过！核心原因是：当你点击提交按钮时，输入框的blur事件和按钮的click事件会进入事件队列，但执行顺序不一定是blur先完成更新tagModel，导致你的PutTagDataToServer()拿到的还是旧的标签数据。下面给你几个靠谱的解决方案：

方案1：手动触发标签添加后再提交 #

最直接的办法是在提交前，主动把输入框里未确认的标签添加到tagModel，确保数据更新后再发请求。步骤如下：

1. 给tag-input添加模板引用变量：

<tag-input #tagInput id="enter-tags" name="enter-tags" 
           [modelAsStrings]="true" [addOnBlur]="true" 
           [(ngModel)]="tagModel" [addOnPaste]="true" [editable]="true">
</tag-input>
<button type="submit" (click)="handleSubmit(tagInput)" [disabled]="!validateForm()"> 
  Submit Tags 
</button>

2. 在组件类里实现handleSubmit方法，先处理未提交的标签，再调用服务器请求：

handleSubmit(tagInput: any) {
  const pendingTag = tagInput.inputElement.nativeElement.value.trim();
  
  if (pendingTag) {
    // 手动添加未提交的标签
    tagInput.addTag(pendingTag);
    // 等待Angular完成变更检测，确保tagModel已更新
    Promise.resolve().then(() => {
      this.PutTagDataToServer();
    });
  } else {
    // 没有待添加的标签，直接提交
    this.PutTagDataToServer();
  }
}

原理：addTag方法会同步更新tagModel，但Angular的变更检测可能需要一个微任务周期才能把更新同步到视图和变量，所以用Promise.resolve()确保我们在更新完成后再发送请求。

方案2：禁用addOnBlur，统一通过提交处理 #

如果你不想依赖blur事件自动添加标签，可以直接关闭这个功能，所有标签添加都通过提交时手动处理：

修改tag-input的属性：

<tag-input #tagInput id="enter-tags" name="enter-tags" 
           [modelAsStrings]="true" [addOnBlur]="false" <!-- 关闭blur添加 -->
           [(ngModel)]="tagModel" [addOnPaste]="true" [editable]="true">
</tag-input>

然后handleSubmit方法和方案1一样，确保所有待输入的标签都被添加后再提交。

方案3：利用ngx-chips的事件确保数据同步 #

ngx-chips提供了onAdd事件，你可以用一个标志位来跟踪标签是否正在添加，确保提交动作在所有添加完成后执行：

1. 组件类里添加标志：

isAddingTag = false;

2. 绑定onAdd事件：

<tag-input id="enter-tags" name="enter-tags" 
           [modelAsStrings]="true" [addOnBlur]="true" 
           [(ngModel)]="tagModel" [addOnPaste]="true" [editable]="true"
           (onAdd)="isAddingTag = true; setTimeout(() => isAddingTag = false, 0)">
</tag-input>
<button type="submit" (click)="handleSubmit()" [disabled]="!validateForm() || isAddingTag"> 
  Submit Tags 
</button>

3. 修改handleSubmit：

handleSubmit() {
  if (this.isAddingTag) {
    // 如果正在添加标签，延迟执行提交
    setTimeout(() => this.handleSubmit(), 50);
    return;
  }
  this.PutTagDataToServer();
}

这个方案通过标志位避免在标签添加过程中提交，适合需要保留addOnBlur功能的场景。

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