无法使用 .trim() 方法删除 Angular 应用程序中组件的 HTML 中的空格

Question

我正在开发 angular 应用程序。在 mat-select 内组件的 HTML 中，我试图使用 .trim() 方法删除 whiteapces，但我的应用程序正在中断。我的代码

<div class="col-2">
    <mat-form-field>
            <mat-select
                    placeholder="Source"
                    [(ngModel)]="applicable.SourceNm.trim()">
                    <mat-option
                            *ngFor="let source of applicableLevel.SourceListTxt.split(',')"
                            [value]="source">
                            {{source.trim()}}
                    </mat-option>
            </mat-select>
    </mat-form-field>
</div>

如果我删除 ngModel 中的 .trim() ，那么应用程序可以正常工作。我不确定在 ngModel 中使用 .trim() 有什么问题。我得到的错误是

Parser Error: Unexpected token '=' at column 32 in [applicableLevel.SourceNm.trim()=$event] in ng:///AdminModule/ConfigurationComponent.html@516:160 ("                                                                                                    [ERROR ->][(ngModel)]="applicableLevel.SourceNm.trim()"

Answer 1

Demo你可以试试管子修整

 import { Pipe, PipeTransform } from '@angular/core';
   @Pipe({
      name: 'trim',
      pure: false
   })
    
   export class TrimPipe implements PipeTransform {
      transform(value: string): any { 
        return value.trim()
      }
      
    }

在 html {{source | trim }}

不要忘记添加 app.modules declarations 这个管道。

ngModel 指定参数不起作用。因此，您需要从 ngModel 中删除 trim() 并使您的 value 修剪

<div class="col-2">
    <mat-form-field>
            <mat-select
                    placeholder="Source"
                    [(ngModel)]="applicable.SourceNm">
                    <mat-option
                            *ngFor="let source of applicableLevel.SourceListTxt.split(',')"
                            [value]="source | trim">
                            {{source | trim }}
                    </mat-option>
            </mat-select>
    </mat-form-field>
</div>

无法使用 .trim() 方法删除 Angular 应用程序中组件的 HTML 中的空格

Not able remove white spaces in HTML of a component in Angular application using .trim() method

javascript

html

angular

typescript

trim