无法将值从组件传递到模板

Posted 2023-02-23

【中文标题】无法将值从组件传递到模板

【英文标题】：Unable to pass value from component to template

【发布时间】：2022-01-12 15:46:38

【问题描述】：

我在组件的export class MyComponent 上方定义了一个变量MIN_PW，尽管智能感知在我的formBuilder 中识别了它，但它没有正确显示在 UI 中（UI 显示“密码必须至少包含字符” )。

最初我在export class 中定义了变量，它在工作，但有人建议我用const 设置它并将它移到组件上方。

组件文件：

const MIN_PW = 12;

export class MyComponent implements OnInit 

  myFormGroup = this.formBuilder.group(
      password: new FormControl(null, [Validators.required, Validators.minLength(MIN_PW)]),
      // etc
  )

模板文件：

<mat-form-field class="password-field">
<mat-error *ngIf="myFormGroup.controls['password'].invalid">Password must contain at least MIN_PW characters.</mat-error>
</mat-form-field>

【参考方案1】：

我建议将所有常量声明在一个单独的文件中，您可以将其导入到任何您想要的地方。

对我来说，以下方法似乎更适合您的情况：

在一个或多个 TS 文件中定义和导出常量。 使用 import MY_CONSTANT from '../constants/my-constant.ts' 导入常量；无论您在哪里需要它们。 使用它们并获得快乐。