1

我正在尝试使用 TS 将 html 代码生成为 Clarity-data-grid 的字符串，然后将该字符串设置为 div 的值，但除非我在 HTML 文件中实际键入 HTML 代码，否则清晰度框架将不起作用.

this.component.nativeElement.innerHTML=this.html;-> 在 TS 中这样做是行不通的。但是如果我在（下面的#html）中输入所有内容，它就会工作，它会显示表格。

html: string ='';
//Generating the grid
private genGrid(data: string): void {
    let request: Object;
    if(data !== ''){
      request = JSON.parse(data);
      for(let prop in request){
        if(request.hasOwnProperty(prop))
          this.html+='<clr-dg-column [clrDgField]="\''+prop+'\'">'+prop+'</clr-dg-column>';
      }
      for(let prop in request){
        if(request.hasOwnProperty(prop))
          this.html+='<clr-dg-cell>'+prop+'</clr-dg-cell>';
      }
    }
}
this.genGrid(someString);
this.component.nativeElement.innerHTML=this.html;

此 html 代码将在我的文件中生成#html

<div class="card-block" style="padding: 0 10px 10px 10px;"><clr-datagrid><clr-dg-column [clrDgField]="'productId'">productId</clr-dg-column><clr-dg-column [clrDgField]="'productCategoryId'">productCategoryId</clr-dg-column><clr-dg-column [clrDgField]="'productName'">productName</clr-dg-column><clr-dg-column [clrDgField]="'countUnit'">countUnit</clr-dg-column><clr-dg-column [clrDgField]="'manufacturer'">manufacturer</clr-dg-column><clr-dg-column [clrDgField]="'country'">country</clr-dg-column><clr-dg-column [clrDgField]="'description'">description</clr-dg-column><clr-dg-column [clrDgField]="'status'">status</clr-dg-column><clr-dg-column [clrDgField]="'createdDate'">createdDate</clr-dg-column><clr-dg-column [clrDgField]="'createdBy'">createdBy</clr-dg-column><clr-dg-column [clrDgField]="'modifiedBy'">modifiedBy</clr-dg-column><clr-dg-column [clrDgField]="'modifiedDate'">modifiedDate</clr-dg-column><clr-dg-cell>productId</clr-dg-cell><clr-dg-cell>productCategoryId</clr-dg-cell><clr-dg-cell>productName</clr-dg-cell><clr-dg-cell>countUnit</clr-dg-cell><clr-dg-cell>manufacturer</clr-dg-cell><clr-dg-cell>country</clr-dg-cell><clr-dg-cell>description</clr-dg-cell><clr-dg-cell>status</clr-dg-cell><clr-dg-cell>createdDate</clr-dg-cell><clr-dg-cell>createdBy</clr-dg-cell><clr-dg-cell>modifiedBy</clr-dg-cell><clr-dg-cell>modifiedDate</clr-dg-cell>
4

1 回答 1

1

因为这是一个 Angular 库。它适用于 Angular 上下文，并且需要对其进行编译才能正常工作。

将其设置为元素的 innerHTML（顺便说一句，这在 Angular 中是一种非常糟糕的做法）使其成为“最终的”，即它不会被编译为 JS 代码。

如果你想这样做，我建议你看看动态组件或CDK 门户

于 2019-05-31T07:36:15.170 回答