如何替换ion-select选中值中的空格？尝试方法无效求解决方案

我看了你的代码，问题出在JavaScript字符串的不可变性上——replace()方法并不会直接修改原字符串，而是返回一个去掉空格后的新字符串，你之前的代码只是调用了replace但没有把结果赋值回this.musicDirection，所以原变量值根本没变。

修正后的代码 #

把你的test()函数改成这样就能生效了：

test(){ 
  // 将replace返回的新字符串重新赋值给原变量
  this.musicDirection = this.musicDirection.replace(/\s/g, ""); 
  console.log(this.musicDirection); 
}

为什么原来的方法不生效？ #

在JavaScript中，所有字符串都是不可变的，任何对字符串的"修改"操作（比如replace、trim、slice等）都会返回一个全新的字符串，而不会改变原来的字符串内容。你之前只调用了replace但没有接收返回值，所以this.musicDirection还是原来带空格的那个值。

额外优化建议 #

如果你希望在选中选项时直接得到无空格的值，也可以在ion-option渲染阶段就处理好，这样能省去后续的test()函数调用：

<ion-select [(ngModel)]="musicDirection" name="musicDirection"> 
  <ion-option *ngFor="let item of this.musicDirections" [value]="item.replace(/\s/g, '')"> 
    {{item}} 
  </ion-option> 
</ion-select>

这样选中后musicDirection会直接被赋值为无空格的字符串，不需要再手动处理。

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