AngularJS md-autocomplete搭配md-chips选中项显示[object Object]求助

出现[object Object]是因为芯片模板未正确读取对象属性，或对象在转换过程中出现异常，按以下步骤排查修复：

1. 修复md-transform-chip方法（核心） #

md-transform-chip负责将选中项转换为芯片数据，需确保它返回包含name属性的对象：

// 控制器中实现transformChip方法
this.transformChip = function($chip) {
  // 处理自动完成选中的对象
  if (angular.isObject($chip)) {
    return {
      id: $chip.id,
      name: $chip.name,
      value: $chip.value
    };
  }
  // 处理手动输入的文本（因md-add-on-blur="true"开启）
  return {
    id: $chip,
    name: $chip,
    value: $chip
  };
};

若之前的方法错误返回字符串或不完整对象，会导致芯片无法读取name属性，进而显示对象的字符串形式。

2. 调整芯片模板的绑定方式 #

若name为纯文本，将ng-bind-html替换为ng-bind，避免因HTML信任问题导致内容不显示：

<md-chip-template>
  <span class="company-select" ng-bind="$chip.name"></span>
</md-chip-template>

若需渲染HTML内容，需在控制器中用$sce.trustAsHtml处理name属性：

// 控制器注入$sce并处理数据
function YourController($sce) {
  this.getItems = function(searchText) {
    return yourDataList.filter(item => {
      return item.name.includes(searchText);
    }).map(item => {
      item.name = $sce.trustAsHtml(item.name);
      return item;
    });
  };
}

3. 验证ngModel数组的元素结构 #

在md-on-add事件中打印数组，确认每个元素都包含name属性：

this.onSelectionChange = function() {
  console.log(this.inputValue); // 检查数组内对象是否存在name属性
};

若数组中存在字符串或无name属性的对象，需回到transformChip方法调整转换逻辑。

4. 确认md-item-text配置正确 #

md-item-text="item.name"已正确设置，确保自动完成选项能显示文本，该配置不影响芯片显示，但需保证选中对象确实包含name字段。

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