Angular 使用 Ngfor 显示 Ng 模板的行未显示

Question

我在容器中使用 ngFor 来显示与类型对应的模板行，而不是对整个表单进行硬编码。但是我无法显示任何行。我试过制作一个 ngif 和强制显示所有内容。

HTML

 <ng-container
    *ngFor="let column of filteredColumns"
    [ngTemplateOutlet]="getColumnInputType(column)"
    [ngTemplateOutletContext]="{ $implicit: column }"
  ></ng-container>
</ng-container>
<ng-container *ngIf="displayAsRow">
  <ng-container *ngFor="let column of filteredColumns">
    <c-form-row [title]="column.title" [description]="column.description">
      <ng-container [ngTemplateOutlet]="getColumnInputType(column)" [ngTemplateOutletContext]="{ $implicit: column }"></ng-container>
    </c-form-row>
  </ng-container>
</ng-container>

HTML ng-template 类型示例

    <ng-template #text let-column>
  <div *cHasRole="checkPermissions(column.permissions)" class="d-flex align-items-center justify-content col-3 mb-3">
    <mat-form-field [ngClass]="{ 'col-11': column?.description }" appearance="outline" stateChange="onFieldChange(column)">
      <mat-label>{{ column.title | translate }} {{ column.validation && column.validation.required ? ' *' : '' }}</mat-label>
      <input matInput [formControlName]="column.field" [readonly]="checkColumnReadOnly(column)" />
      <mat-hint *ngIf="column.hintLabel">{{ column.hintLabel }}</mat-hint>
      <mat-error *ngIf="checkValidationErrors(column, 'required')">
        {{ util.formatFormErrorMsg(column.title, 'required') }}
      </mat-error>
      <mat-error *ngIf="checkValidationErrors(column, 'pattern')">
        {{ util.formatFormErrorMsg(column.title, 'pattern') }}
      </mat-error>
    </mat-form-field>
    <h5 *ngIf="column?.description" class="cursor-pointer col-1 pl-0" [ngbTooltip]="column.description" placement="right-center">
      <i class="far fa-info-circle text-info"></i>
    </h5>
  </div>
</ng-template>

返回字符串的方法：

getColumnInputType(column: any): string {
  if (column.type.toLowerCase() === 'datetime' || column.type.toLowerCase() === 'date' || column.type.toLowerCase() == 'boolean') {
    return column.type.toLowerCase();
  }
  return column.inputMetaData.inputType.toLowerCase();
}

Answer 1

问题是 getColumnInputType returns 是一个字符串，但是 ng-container ngTemplateOutlet 输入需要 TemplateRef.

有两种方法可以解决这个问题：

1。将模板引用类型发送到正在检查类型的函数：

getColumnInputType(column: any, textTemplate: TemplateRef): TemplateRef {
  if (column.type === 'text') {
    return textTemplate;
  }

  //TODO: what if you don't have a template for the given type
}

因此在您的 HTML 中您可以执行以下操作：

<ng-container
  *ngFor="let column of filteredColumns"
  [ngTemplateOutlet]="getColumnInputType(column, text)"
  [ngTemplateOutletContext]="{ $implicit: column }"
>
</ng-container>

<ng-template #text let-column>
  ...
</ng-template>

2。在组件中按名称捕获引用：

@ViewChild('text') textTemplate: TemplateRef;

getColumnInputType(column: any): TemplateRef {
  if (column.type === 'text') {
    return this.textTemplate;
  }

  //TODO: what if you don't have a template for the given type
}

并在 HTML 中：

<ng-container
  *ngFor="let column of filteredColumns"
  [ngTemplateOutlet]="getColumnInputType(column)"
  [ngTemplateOutletContext]="{ $implicit: column }"
>
</ng-container>

<ng-template #text let-column>
  ...
</ng-template>

Angular 使用 Ngfor 显示 Ng 模板的行未显示

Angular Row not displaying using Ng-for to display NgTemplate

angular

rxjs

angular-forms

1。将模板引用类型发送到正在检查类型的函数：

2。在组件中按名称捕获引用：