Angular Material + TypeScript：自动完成 + 选择选项

Question

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

但是，当我向 select 键入一个选项 returned 时，如果我单击该选项，它 return 是一个对象，而不是标签名称。

这是 UI 的屏幕截图，其中显示 md-autocomplete return 名称的下拉菜单，创建了一个仅显示名称的新标签，但单击hotel returns {"id":1,"name":"hotel"}。

我的问题是我只想 return 名称，但不确定我需要在哪里进行更改才能做到这一点。

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 函数被调用，即使您 select 下拉列表中的项目。

当您从下拉列表中 select 一个项目时，它实际上 returns 以下：

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

Angular Material + TypeScript：自动完成 + 选择选项

Angular Material + TypeScript: Auto-complete + selecting option

javascript

angularjs

typescript

angular-material