Angular Row 不显示使用 Ngfor 来显示 Ng 模板答案

【问题标题】：Angular Row not displaying using Ng-for to display NgTemplateAngular Row 不显示使用 Ngfor 来显示 Ng 模板
【发布时间】：2021-06-25 14:44:37
【问题描述】：

我在容器中使用 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>

按类型划分的 ng-template 的 HTML 示例

    <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();
}

【问题讨论】：

getColumnInputType 返回什么？
它返回一个与模板名称的值匹配的字符串
它需要返回一个TemplateRef！ angular.io/api/common/NgTemplateOutlet
@AndreiTătar 我怎样才能从方法中返回 TemplateRef，我已经包含了返回上面字符串的方法。

标签： angular rxjs angular-forms

【解决方案1】：

问题是getColumnInputType 返回一个字符串，但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>

【讨论】：