无法使用 .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>