нет рендеринга с mat-error, ng-template и * ngTemplateOutlet - PullRequest
Новая
       66

нет рендеринга с mat-error, ng-template и * ngTemplateOutlet

0 голосов
/ 03 февраля 2019

Этот код работает нормально и без ошибок (без 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), почему?(просто посмотрите на сообщение об ошибке, как обычный текст красного цвета): 

<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>

Есть идеи?Спасибо!

1 Ответ

0 голосов
/ 03 февраля 2019

Так же, как упомянуто здесь в этом ответе :

Элементы <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.

...