Question

此代码可以正常工作（没有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>

有什么想法吗？谢谢！

Answer 1

就像在answer中在这里提到的：

<mat-error>元素必须是<mat-form-field>的直接子元素才能正常工作。

因此，就像在该答案中（如果情况是一个单独的组件）一样，它也适用于此：将容器设置在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。

没有渲染带有mat-error，ng-template和* ngTemplateOutlet

1 个答案: