Блог

Главная - Вопросы по программированию - Общие условия для *ngIf в угловой 11

Общие условия для *ngIf в угловой 11

#angular #angular-material

Вопрос:

Я разрабатываю интерфейс с использованием angular 11, и есть несколько мест, где мне нужно применить *ngIf с одним и тем же условием,

 <mat-option *ngIf="horizontalStepperForm.value.step2.companyType == 'Head_Office'" value="Light">Light</mat-option>
<mat-option *ngIf="horizontalStepperForm.value.step2.companyType == 'Head_Office'" value="Basic">Basic</mat-option>
<mat-option *ngIf="horizontalStepperForm.value.step2.companyType == 'Head_Office'" value="Professional">Professional</mat-option>

Эти значения берутся из группы форм, и есть ли какой-либо способ устранить это же условие, используя метод, позволяющий уменьшить жесткое кодирование одного и того же везде в HTML?

Комментарии:

1. не рекомендуется помещать вызов метода *ngIf=checkVisibility() в html. Причина в том, что метод будет вызываться каждые 1-2 секунды (потому что он запускается при каждом обнаружении изменений) . Попробуйте применить console.log любой такой метод и убедитесь в этом сами. Я могу дать несколько советов. Создайте постоянную переменную со строкой Head_office или вы также можете задать логическое значение, подписавшись на horizontalStepperForm.valueChanges.subscribe( data => {}) . Дайте мне знать, если вам понадобится больше разъяснений по этому поводу

2. @ShashankVivek Эта логика часто вызывается во время цикла угловой перерисовки, независимо от того, вставляете вы ее в метод или нет. Я не понимаю, как использование константы решило бы это, и что бы вы сделали, valueChanges чтобы решить эту проблему.

Ответ №1:

Оберните его в функцию в классе компонентов:

 isCompanyTypeHeadOffice() {
    return horizontalStepperForm.value.step2.companyType == 'Head_Office'
}

Тогда вы можете сделать это:

 <mat-option *ngIf="isCompanyTypeHeadOffice()" value="Light">Light</mat-option>
<mat-option *ngIf="isCompanyTypeHeadOffice()" value="Basic">Basic</mat-option>
<mat-option *ngIf="isCompanyTypeHeadOffice()" value="Professional">Professional</mat-option>

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

Ответ №2:

Я все еще рекомендую это

  get bool():boolean{
    return this.horizontalStepperForm.value.step2.companyType == 'Head_Office'
  }
 
 <mat-option *ngIf="bool" value="Light">Light</mat-option>
Метки: