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

Question

我正在研究一个角度应用程序。在组件的 HTML 中，mat-select我试图使用 .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()"javascript网页格式有角度的打字稿

Answer 1

您可以尝试使用管道进行修整

 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分配给参数不起作用。所以你需要删除trim()并使ngModel你的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>