Angular 使用 Ngfor 显示 Ng 模板的行未显示
Angular Row not displaying using Ng-for to display NgTemplate
我在容器中使用 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();
}
问题是 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>
我在容器中使用 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();
}
问题是 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>