Могу ли я сгенерировать HTML-код в виде строки, а затем установить эту строку равной значению div в машинописи с помощью системы ясности (Angular 7) - PullRequest
Новая
       12

Могу ли я сгенерировать HTML-код в виде строки, а затем установить эту строку равной значению div в машинописи с помощью системы ясности (Angular 7)

1 голос
/ 31 мая 2019

Я пытаюсь сгенерировать HTML-код в виде строки для сетки данных Clarity, используя TS, а затем установить эту строку равной значению 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>

1 Ответ

0 голосов
/ 31 мая 2019

Потому что это угловая библиотека.Он работает с контекстом Angular, и для правильной работы он должен быть скомпилирован .

Установка его как innerHTML элемента (что, кстати, очень плохая практика в Angular) делает его «окончательным», то есть он не будет скомпилирован в код JS.

Если вы хотите это сделать, я предлагаю вам взглянуть на динамические компоненты или Порталы CDK

...