Условия в *ngIf

Question

всем привет.

имеется некоторая логика, которая в шаблоне компонента дублируется

<ng-container *ngFor="let error of *object* | keyvalue">
    <p class="error-message">
      <span *ngIf="error.key === 'pattern'">{{...}}</span>
      <span *ngIf="error.key === 'maxlength'">{{...}}</span>
      <span *ngIf="error.key === 'required'">{{...}}</span>
    </p>
  </ng-container>

этот блок дублируется три раза, за исключением, что в блоках разный object и соответственно содержание span

хочу всю логику перенести в ng-template, примерно так

<ng-container *ngTemplateOutlet="errorMessage; context: *object* | keyvalue"></ng-container>
<ng-container *ngTemplateOutlet="errorMessage; context: *object2* | keyvalue"></ng-container>
<ng-container *ngTemplateOutlet="errorMessage; context: *object3* | keyvalue"></ng-container>

<ng-template #errorMessage let-error>
    <p class="error-message">
        <span *ngIf="error.key === 'pattern' && context === *object*">{{...}}</span>
        <span *ngIf="error.key === 'pattern' && context === *object2*">{{...}}</span>
        <span *ngIf="error.key === 'maxlength' && context === *object*">{{...}}</span>
        <span *ngIf="error.key === 'required' && context === *object*">{{...}}</span>
        ///
      </p>
</ng-template>

вопрос в следующем: можно ли в *ngIf прописывать такое условие context === *object*? или как правильно прописать условия в *ngIf?

Answer 1

Вообще, для таких случаев больше подходит ngSwitch, это уменьшит количество проверяемых условий в ngIf и упростит читабельность кода:

<container-element [ngSwitch]="error.key">
   <some-element *ngSwitchCase="pattern">

   </some-element>
   <some-element *ngSwitchCase="maxlength">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element> <- По-умолчанию
</container-element>

Здесь, в качестве container-element можно использовать любой контейнерный элемент, например ng-container, или p. В качестве some-element может выступать span, или любой другой html-элемент.

Можно вообще использовать один span и уже внутри него крутить ngIf, ngSwitch и так далее

Answer 2

Я бы предложил вынести в отдельный компонент

<p class="error-message">
    <span>{{text}}</span>
</p>

@Component({
  selector: 'error-message'
})
export class ErrorComponent  {
  @Input() errorKey: string;
  @Input() obj: any; // тут тип объекта и соответствующее имя

  get text(){
      if(errorKey === 'pattern' && obj === context){
        return `текст ошибки о первом объекте`
      }
      ...
  }
}

Пример использования

<ng-container *ngFor="let error of *object* | keyvalue">
      <error-message *ngIf="error.key" [object]="object" [errorKey]="error.key"></error-message>
</ng-container>

Answer 3

нашла решение как норм все вынести в ng-template

<ng-container [ngTemplateOutlet]="errorMessage" [ngTemplateOutletContext]="{name: myContext, message: 'hi'}"></ng-container>
<ng-container [ngTemplateOutlet]="errorMessage" [ngTemplateOutletContext]="{name: myContext2, message: 'hi1'}"></ng-container>
<ng-container [ngTemplateOutlet]="errorMessage" [ngTemplateOutletContext]="{name: myContext3, message: 'hi2'}"></ng-container>

<ng-template #errorMessage let-name="name" let-message="message">
        <span *ngIf="name.name === 'World1'">{{message}}</span>
        <span *ngIf="name.name === 'World2'">{{message}}</span>
        <span *ngIf="name.name === 'World3'">{{message}}</span>
</ng-template>

БЛОГ НА HUSL

Условия в *ngIf

Ответы (3 шт):