Javascript 当值与模板属性匹配时在循环中显示模板

我正在尝试制作一个表组件，我已经完成了，我想在组件中添加一个功能，我可以自定义组件中的各个单元格。我不知道该怎么做

因此，我看到它的实现如下所示：

• model

  是与表相关的数据（标题、行、分页等）

• matches

  是要匹配的列名（在标题id中为匹配项，在行中为属性键）

• let content

  是与该行的单元格关联的数据

{{content | commaSeparate}}

公共表模型={
标题：[
{title:'Column A'，id:'Column A'}，
{title:'columnB'，id:'columnB'}
],
行：[
{columnA:['A'，'B']，columnB:'columnB'}，
{columnA:['C'，'D']，columnB:'ColumnB2'}
]
}

在我的

ui表

组件中，我有以下表体：

{{row[model.headers[c].id]| |''''}

---

我不确定的是，如果

匹配===model.headers[x].id

，如何显示自定义单元格

ng模板

？

在ui表组件中，让我们定义一个输入属性：

@Input() passedTemplate: TemplateRef<any>;
@Input() displayContent: any // to display variable inside ng-template

@Input（）passedTemplate:TemplateRef；
@Input（）displayContent:any//显示ng模板内的变量

并定义一个输入属性，以便将ng模板传递给 像这样：

  <ui-table [model]="tableModel" [passedTemplate]='template' [displayContent]='content'>
  </ui-table>
   <ng-template #template matches="columnA" let-content="content">
    {{content | commaSeparate}}
  </ng-template>

{{content | commaSeparate}}

然后尝试在ui表html文件中使用ng容器：

<ng-container *ngIf="matches === model.headers[x].id"
                          [ngTemplateOutlet]="passedTemplate"
                          [ngTemplateOutletContext]="{content: displayContent}">
</ng-container>

---

希望这些帮助…

在ui表组件中，让我们定义一个输入属性：

@Input() passedTemplate: TemplateRef<any>;
@Input() displayContent: any // to display variable inside ng-template

@Input（）passedTemplate:TemplateRef；
@Input（）displayContent:any//显示ng模板内的变量

并定义一个输入属性，以便将ng模板传递给 像这样：

  <ui-table [model]="tableModel" [passedTemplate]='template' [displayContent]='content'>
  </ui-table>
   <ng-template #template matches="columnA" let-content="content">
    {{content | commaSeparate}}
  </ng-template>

{{content | commaSeparate}}

然后尝试在ui表html文件中使用ng容器：

<ng-container *ngIf="matches === model.headers[x].id"
                          [ngTemplateOutlet]="passedTemplate"
                          [ngTemplateOutletContext]="{content: displayContent}">
</ng-container>

---

希望这能帮上忙…

我能想出来。首先，我创建一个指令，该指令包含一个

match

属性，该属性是我要匹配的列，以及一个

tableCell

属性，该属性是指令中的模板

@Directive({ selector: 'ui-table-cell' })
export class TableCellDirective {
  @Input() public match: string = '';
  @ContentChild('tableCell', { static: false }) public tableCell!: any;
}

接下来，当表加载时，我将所有模板加载到一个对象中，其中键是单元id，值是模板

export class TableComponent implements AfterContentInit {
  @ContentChildren(TableCellDirective)
  public cellDirectives!: QueryList<TableCellDirective>;
  public columnMeta: { [key: string]: object; } = {};

  public ngAfterContentInit() {
    this.cellDirectives.toArray().forEach(colData => this.assignColumnMetaInfo(colData));
  }

  private assignColumnMetaInfo(colData: TableCellDirective) {
    const columnMetaInfo: { [key: string]: object; } = {};
    columnMetaInfo['tableCell'] = colData.tableCell;
    this.columnMeta[colData.match] = columnMetaInfo;
  }
}

导出类TableComponent实现AfterContentInit{
@ContentChildren（TableCellDirective）
公共单元指令！：QueryList；
公共列元：{[key:string]：对象；}={}；
公共ngAfterContentInit（）{
this.cellDirections.toArray（）.forEach（colData=>this.assignColumnMetaInfo（colData））；
}
私有assignColumnMetaInfo（colData:TableCellDirective）{
const columnMetaInfo:{[key:string]：object；}={}；
columnMetaInfo['tableCell']=colData.tableCell；
this.columnMeta[colData.match]=columnMetaInfo；
}
}

在HTML中，我检查当前单元格是否保存了模板。如果保存了模板，我将显示模板。如果不是，则显示原始数据

{{row[cell.id]| |'''}

最后，要使用它，我只需执行以下操作：

{{content}数组列表}

我能想出来。首先，我创建一个指令，该指令包含一个

match

属性，该属性是我要匹配的列，以及一个

tableCell

属性，该属性是指令中的模板

@Directive({ selector: 'ui-table-cell' })
export class TableCellDirective {
  @Input() public match: string = '';
  @ContentChild('tableCell', { static: false }) public tableCell!: any;
}

接下来，当表加载时，我将所有模板加载到一个对象中，其中键是单元id，值是模板

export class TableComponent implements AfterContentInit {
  @ContentChildren(TableCellDirective)
  public cellDirectives!: QueryList<TableCellDirective>;
  public columnMeta: { [key: string]: object; } = {};

  public ngAfterContentInit() {
    this.cellDirectives.toArray().forEach(colData => this.assignColumnMetaInfo(colData));
  }

  private assignColumnMetaInfo(colData: TableCellDirective) {
    const columnMetaInfo: { [key: string]: object; } = {};
    columnMetaInfo['tableCell'] = colData.tableCell;
    this.columnMeta[colData.match] = columnMetaInfo;
  }
}

导出类TableComponent实现AfterContentInit{
@ContentChildren（TableCellDirective）
公共单元指令！：QueryList；
公共列元：{[key:string]：对象；}={}；
公共ngAfterContentInit（）{
this.cellDirections.toArray（）.forEach（colData=>this.assignColumnMetaInfo（colData））；
}
私有assignColumnMetaInfo（colData:TableCellDirective）{
const columnMetaInfo:{[key:string]：object；}={}；
columnMetaInfo['tableCell']=colData.tableCell；
this.columnMeta[colData.match]=columnMetaInfo；
}
}

在HTML中，我检查当前单元格是否保存了模板。如果保存了模板，我将显示模板。如果不是，则显示原始数据

{{row[cell.id]| |'''}

最后，要使用它，我只需执行以下操作：

{{content}数组列表}

如果我有两个要使用此模板的单元格，这是否有效

和

的区别在于

匹配

但

#tableCell

是相同的。是的，您还可以定义一个模板变量，例如：let match，然后使用*ngIf自定义ng模板标记内的内容，不要忘记通过[ngTemplateOutletContext]传递匹配变量{content:displayContent，match:matches}'，如下所示。我没有将模板传递到

ui表

，而是添加了一个指令，并在

ui表

组件中添加了以下内容：

@ContentChildren（TableCellDirective）public CellDirections！：QueryList；

如果我有两个单元格，我想使用此模板？

和

，其中的区别是

匹配

，但

#tableCell

是相同的。是的，您还可以定义一个模板变量，例如：let match，然后使用*ngIf来定制insi中的内容删除模板标记，不要忘记通过[ngTemplateOutletContext]='{content:displayContent，match:matches}'传递matches变量，如下所示。我没有将模板传递到

ui表

，而是添加了一个指令，并在

ui表

组件中添加了这个：

@ContentChildren（TableCellDirective）公共单元指令！：QueryList；