ngx chips编辑标签后排序Chrome失效Firefox正常，求排查方案

这大概率不是浏览器原生兼容性问题，而是Angular变更检测、ngx-chips事件逻辑或代码细节导致的跨浏览器差异，以下是具体排查方向和修复方案：

1. 修复参数传递错误 #

你的onTextChangeInput方法最后一行存在参数引用问题：

// 错误：缺少this.，会导致传入未定义的变量（如果无局部同名变量）
this.defaultValue = this.sortByText(defaultValue);

改为：

this.defaultValue = this.sortByText(this.defaultValue);

2. 解决数组原地排序的变更检测失效问题 #

Array.sort()是原地修改数组，排序后数组引用并未改变。Chrome的Angular变更检测机制对引用不变的数组更新敏感度更低，导致视图不刷新。可以通过返回新数组触发变更检测：
修改排序函数：

sortByText(data: any): any {
  // 先复制原数组，避免原地修改
  const sortedData = [...data].sort((a: any, b: any) => {
    let nameA: any;
    let nameB: any;
    if (this.field.valueType !== 'string') {
      nameA = a.text.toUpperCase();
      nameB = b.text.toUpperCase();
    } else {
      nameA = a.toUpperCase();
      nameB = b.toUpperCase();
    }
    if (nameA < nameB) return -1;
    if (nameA > nameB) return 1;
    return 0;
  });
  return sortedData;
}

3. 移除ngModel与formControlName的共存冲突 #

你同时使用了[(ngModel)]和formControlName，两者在值同步时机上的浏览器差异可能导致视图更新不一致。建议二选一：

• 若使用表单控件：删除[(ngModel)]='defaultValue'，通过formControl的value属性操作数据；
• 若使用ngModel：删除[formControlName]='fieldName'，依赖双向绑定同步数据。

4. 强制触发变更检测（兜底方案） #

如果以上方法无效，可手动触发Angular变更检测确保视图更新：
首先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

然后在排序后调用：

onTextChangeInput(value: any) {
  if(this.field.defaultValue[value.index] && this.defaultValue[value.index].text){
    this.defaultValue[value.index].text = value.tag.text;
  }
  this.defaultValue = this.sortByText(this.defaultValue);
  this.cdr.detectChanges(); // 强制触发变更检测
}

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