使用的框架。Angular 8 with Material Design
我做了一个表格模板,以便在不同的组件中重复使用我的结构,这样我就不必再重新建立它。这个表格可以在每个组件中使用和修改,在桌面视图中,它看起来和我想象的一样。现在我添加了一个移动头行,看起来应该是不同的,我希望使用*ngTemplateOutlet和Context中的 "isMobile "属性可以解决我的问题。但是在组件中,我只接收到数据,而不是上下文!?
有谁有办法解决这个问题吗?
在我的组件中使用了ng-template,在那里我使用了我的table-component,但它什么都没有显示。使用ng-container显示我提供的数据。
我的template-table的一部分。
<ng-container matColumnDef="{{ headerValue.field }}-filter" *ngFor="let headerValue of headerValues">
<ng-container *ngIf="headerValue.isSearchable">
<th mat-header-cell *matHeaderCellDef [class.hidden-below-lg]="headerValue.isMobileHeaderRow">
<trp-input-field
formControlName="{{ headerValue.field }}"
placeholder="{{ 'SEARCH' | translate }}"
class="dark"
></trp-input-field>
</th>
<td
mat-cell
*matCellDef="let element"
[class.hidden-below-lg]="headerValue.isMobileHeaderRow"
[innerHTML]="
(element[headerValue.field] ? element[headerValue.field].toString() : '') | translate
"
></td>
</ng-container>
<ng-container *ngIf="!headerValue.isSearchable">
<th mat-header-cell *matHeaderCellDef></th>
</ng-container>
在我的Component中,我的appColumn-Format
<app-table-header
[isSearchable]="true"
name="{{ 'TARGET_AGREEMENT.STORES.FIELDS.NAME' | translate }}"
field="name"
[isMobileHeaderRow]="true"
width="260px"
>
<ng-container *appColumnFormat="let targetAgreement">
{{ targetAgreement.name }} -
{{ targetAgreement.rmsId }}
</ng-container>
</app-table-header>
我的appColumnFormat-Directive在我的table-head-Directive中使用。
@Directive({
selector: '[appColumnFormat]',
})
export class TableColumnFormatDirective {
}
my table-header-Directive
@Directive({
selector: 'trp-table-header',
})
export class TableHeaderDirective {
@Input() public name: string;
@Input() public field: string;
@Input() public width: string;
@Input() public isSearchable = false;
@Input() public isMobileHeaderRow = false;
@Input() public sorting = (_data: any, _sortHeaderId: string):
string => {
return '';
};
@ContentChild(TableColumnFormatDirective, { static: false, read:
TemplateRef })
public template: TemplateRef<any>;
}
我希望在我的Component中能有一个context-object,比如-->。<td mat-cell *matCellDef="let element; let isMobile" [class.hidden-below-lg]="headerValue.isMobileHeaderRow" [innerHTML]="(element[headerValue.field] ? element[headerValue.field].toString() : '') | translate "></td>
or something
一开始我是按照这个教程来的。https:/blog.jonrshar.pe2017May29angular-ng-template-outlet.html。
试试这个。
在你的 应用表头 组件的视图,而不是使用 innerHTML,使用 *ngTemplateOutlet
<td mat-cell *matCellDef="let element"
[class.hidden-below-lg]="headerValue.isMobileHeaderRow">
<ng-container *ngTemplateOutlet="template; context: { $implicit: element }"></ng-container>
</td>
你在这个模板中传递的上下文会涓涓细流到你的结构指令中。