Javascript 角度材质+类型脚本：自动完成+选择选项

目前我的代码有一个问题，如果我创建一个新的芯片，它会击中我的标签型号并创建一个名称和ID

但是，当我键入以选择返回的选项时，如果单击该选项，它将返回一个对象，而不是标签名称

这里是UI的屏幕截图，md autocomplete的下拉菜单返回名称，新标签只显示名称，但单击hotel返回{id:1，name:hotel}

我的问题是，我只想返回名称，而不确定需要在哪里进行更改

用户界面：

labels.html：

labelsController.ts：

labelsService.ts：

---

我不久前也遇到了同样的问题。这样做的原因是，即使您从下拉列表中选择了项，也会调用md on append函数

从下拉列表中选择项目时，它实际上会返回以下内容：

{
    name:{
           name:hotel,
           id:1
    },
    id:4
}

因此，您应该稍微更改createLabel函数的代码

JS:

---

伙计，你刚刚帮我省了几个小时的工作！我不知道在选择元素时会调用附加上的md！非常感谢你！不过，我还有最后一个问题。然后，我将如何增强此代码以防止多次选择“酒店”？如何防止用户再次使用标签？这是一个错误。由于id的唯一性，它不允许您两次单击并插入同一标记。@RyanDrake哈哈。我花了好几个小时才弄明白同样的事情。我很高兴能为你节省时间。第二个问题的答案是，我也面临着这个问题。在md on append中，在芯片阵列上应用angular.forEach并检查该元素是否存在，然后拼接该元素。然后返回相同的元素。没有其他选择。呃，那代码是什么样子的？我对打字太陌生了，我不确定！哦，我忘了你在用打字脚本。对不起，老板，我不懂打字。我以为你在用AngularJS。无论如何，逻辑是一样的。在芯片上应用for循环数组并检查$chip.name是否已经存在，然后从数组中删除该元素并返回JSON。

constructor(private $scope: common.IScope<LabelScope>, 
                private labelsService: ILabelsService){

                    super($scope);
                    this.vm.labels = this.loadLabels();
                    this.vm.selectedLabels = [];
                    this.vm.selectedItem = null;
                    this.vm.searchText = null;         
                    console.log($scope);           
            } 

            private loadLabels() {
                return this.labelsService.getLabels();
            }
            // Returns list of labels that already exists
            public querySearch (query: string) {
                var results = query ? this.loadLabels() : [];
                return results;
                console.log(results);
            }          
            // Returns name + ID on new chip created
            public createLabel($chip: string) {
                return {
                    name: $chip,
                    id: 4
                };                                               
            }

 private mockLabels: Array<Label> = [
            new Label(1, 'hotel'),
            new Label(2, 'sport'),
            new Label(3, 'gaming'),
            new Label(4, 'apple'),
            new Label(5, 'retail')
        ];

        public getLabels() {
            return this.mockLabels;   
            console.log(this.mockLabels);         
        }

{
    name:{
           name:hotel,
           id:1
    },
    id:4
}

public createLabel($chip) {
    angular.forEach(this.vm.selectedLabels,function(element,index){
         if(element.name==$chip.name||element.name==$chip){
             this.vm.selectedLabels.splice(index,1);
         }
    })
    if($chip.id==undefined){
         return {
           name: $chip,
           id: 4
         };                                 
    }
    else{
        return $chip;
    }