нет рендеринга с ошибкой мата, ng-template и *ngTemplateOutlet

Этот код работает нормально и правильно (без ngTemplateOutlet):

<mat-form-field [formGroup]="formGroup">
    <input matInput type="text"
        [formControlName]="fControlName"
    >
  <ng-container *ngIf="isShowErrors()" ngProjectAs="mat-error">
    <ng-container *ngFor="let error of showSMErrors" >
      <mat-error>{{ error.message }}</mat-error>
    </ng-container>
  </ng-container>
</mat-form-field>

Но этот код не работает должным образом (с ngTemplateOutlet), почему? (просто посмотрите сообщение error.message как обычный текст красного цвета):

<mat-form-field [formGroup]="formGroup">
    <input matInput type="text"
        [formControlName]="fControlName"
    >
  <ng-container *ngTemplateOutlet="showErrorsTemplate"></ng-container>
</mat-form-field>

<ng-template #showErrorsTemplate ngProjectAs="mat-error">
  <ng-container *ngIf="isShowErrors()" >
    <ng-container *ngFor="let error of showSMErrors" >
      <mat-error>{{ error.message }}</mat-error>
    </ng-container>
  </ng-container>
</ng-template>

Любые идеи? Спасибо!


angular angular-material ng-template ng-container
person Szorba    schedule 03.02.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Как упоминалось здесь в этом ответе:

Элементы <mat-error> должны быть прямыми дочерними элементами <mat-form-field>, чтобы работать правильно.

Так что, как и в этом ответе, где case является отдельным компонентом, он также применяется здесь: установите свой контейнер внутри тега mat-error, и он будет работать нормально!

<mat-form-field [formGroup]="formGroup">
  <input matInput type="text" [formControlName]="fControlName">
  <mat-error>
    <ng-container *ngTemplateOutlet="showErrorsTemplate"></ng-container>
  </mat-error>
</mat-form-field>

что означает, что вам не нужно использовать mat-error внутри вашего ng-template.

person AJT82    schedule 03.02.2019
comment
Отказ от ответственности: я был на грани пометки этого как дубликата, но я видел, что это немного другой вопрос, чем тот, который связан. - person AJT82; 03.02.2019
comment
Это совершенно другой код, который я хотел. Невозможно показать только мат-ошибки с шаблоном и повторно использовать его. Спасибо за ответы! - person Szorba; 04.02.2019