Угловой материал + TypeScript: Auto-complete + опция выбора

Question

У меня проблема с моим кодом на данный момент, поэтому, если я создаю новый чип, он попадает на мою модель ярлыка и создает имя и идентификатор.

Однако, когда я печатаю, чтобы выбрать возвращаемый параметр, если я нажму на эту опцию, он вернет объект, а не имя метки.

Вот скриншот интерфейса, где выпадающий который появляется md-autocomplete возвращает имя, новый ярлык создается только с именем, которое отображается, но при нажатии на hotel возвращается {"id":1,"name":"hotel"}.

Моя проблема заключается в том, что я хочу вернуть только имя и не знаю, где мне нужно сделать изменение, чтобы сделать это.

UI:

labels.html:

<md-content layout="column"> 
    <md-chips ng-model="cont.vm.selectedLabels" md-autocomplete-snap md-require-match="false" 
     md-on-append="cont.createLabel($chip)"> 
     <md-autocomplete 
      md-selected-item="cont.vm.selectedItem" 
      md-search-text="searchText" 
      md-items="item in cont.querySearch(searchText)" 
      md-item-text="item.name" 
      md-min-length="2" 
      placeholder="Type to add a label"> 
     <span md-highlight-text="cont.vm.searchText" >{{item.name}}</span> 
      <md-not-found> 
      No matches found. 
      </md-not-found>  
     </md-autocomplete> 
     <md-chip-template> 
     <span> 
      <strong>{{$chip.name}}</strong> 
     </span> 
     </md-chip-template> 
    </md-chips> 
    <br /> 
    <p class="md-title">Existing Labels</p> 
    <md-list> 
     <md-list-item class="md-2-line label-option" ng-repeat="label in cont.vm.labels" layout="row" 
      layout-wrap> 
     <div class="md-item-text md-whiteframe-z1" flex> 
      <h3>(NAME: {{label.name}}) (ID: {{label.id}})</h3> 
     </div> 
     </md-list-item> 
    </md-list> 
</md-content> 

labelsController.ts:

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 
       };            
      } 

labelsService.ts:

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);   
     } 

Answer 1

Я столкнулся с той же проблемой некоторое время назад. И причина в том, что функция md-on-append вызывается, даже если вы выберете элемент из раскрывающегося списка.

При выборе элемента из выпадающего списка, он фактически возвращает следующее:

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

Таким образом, вы должны изменить код createLabel() функции немного.

JS:

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; 
    }