没有使用 mat-error、ng-template 和 *ngTemplateOutlet 进行渲染

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

就像这里提到的：

The <mat-error> elements need to be direct children of <mat-form-field> in order to work properly.

就像那个答案一样，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>

这意味着您不需要在 ng-template.

中使用 mat-error

没有使用 mat-error、ng-template 和 *ngTemplateOutlet 进行渲染

no render with mat-error, ng-template and *ngTemplateOutlet

angular-material

ng-template

angular

ng-container