Блог

Главная - Вопросы по программированию - Не удалось передать значение из компонента в шаблон

Не удалось передать значение из компонента в шаблон

#angular #typescript #variables #components

Вопрос:

Я определил переменную MIN_PW над моим компонентом export class MyComponent , и , хотя intellisense распознает ее в моем formBuilder , она не отображается в пользовательском интерфейсе должным образом (пользовательский интерфейс показывает, что «Пароль должен содержать не менее символов»).

Первоначально я определил переменную внутри 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:

Я бы предложил объявить все ваши константы в отдельном файле, который вы будете импортировать, куда захотите.

Мне кажется, что следующий подход кажется более прямым для вашего случая:

  1. Определите и экспортируйте свои константы в один или несколько файлов TS.
  2. Импортируйте константы с помощью import { MY_CONSTANT } из ‘../constants/my-constant.ts’; где бы они вам ни понадобились.
  3. Используйте их и будьте счастливы.

Метки: