在 angular 的下拉列表的 onChange 中，Slice Pipe 抛出修剪过的字符串而不是原始字符串

Question

我想在字符串长度大于 5 时从对象 trim 字符串，所以我在 HTML 中使用了 Slice 管道，但是在 onChange 事件中它正在传递 trimmed 值这是通过管道而不是原来的管道完成的。

studentList = [{"StudentName":"RockAngelWatson", studentId: "1"},
              {"StudentName":"MiyaAngelWatson", studentId: "2"}] ;

onChange(event,name)
    {
      console.log("&&&&",name)
    }

<select class="form-control" (change)="onChange($event,action)"  triggers="hover" container="body" placement="bottom auto" 
[(ngModel)]="action">
  <option *ngFor="let action of studentList">
  {{action.StudentName.length > 5 ? (action.StudentName | slice:0:5)+'...':(action.StudentName)}}
  </option>
  </select>

控制台名称结果是“RockA...”，但我想要全名而不是 trim更改方法中的 med 字符串，它只是原始字符串“RockAngelWatson”。

Answer 1

问题与 SlicePipe 没有直接关系，更不用说与 Angular 的具体关系了，但事实上您没有将 [value] 绑定添加到 <option> 所以 option 中的文本被假定为要绑定到 [(ngModel)].

的 value

解决方法很简单，将[value]添加到<option>:

<option *ngFor="let action of studentList" [value]="action.StudentName">

DEMO

在 angular 的下拉列表的 onChange 中，Slice Pipe 抛出修剪过的字符串而不是原始字符串

Slice Pipe throwing trimmed string instead for original string in onChange of dropdown in angular

dropdown

ngmodel

angular