我可以将 html 代码生成为字符串，然后使用清晰度框架 (Angular 7) 在打字稿中将该字符串设置为 div 的值吗

Question

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

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

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>

Answer 1

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

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

如果你想这样做，我建议你看看dynamic components or CDK Portals

我可以将 html 代码生成为字符串，然后使用清晰度框架 (Angular 7) 在打字稿中将该字符串设置为 div 的值吗

Can I generate html code as a string then set that string to be the value of a div in typescript using clarity framework (Angular 7)

clarity

typescript

angular