Могу ли я сгенерировать html-код в виде строки, а затем установить эту строку как значение div в машинописном тексте, используя структуру ясности (Angular 7)
Я пытаюсь сгенерировать html-код в виде строки для сетки Clarity-data-grid с помощью 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
Потому что это библиотека Angular. Он работает с контекстом Angular, и для правильной работы он должен быть составлено.
Установка его как innerHTML элемента (что, кстати, является очень плохой практикой в Angular) делает его «окончательным», то есть он не будет скомпилирован в код JS.
Если вы хотите это сделать, я предлагаю вам взглянуть на динамические компоненты или Порталы CDK.
не будет ли это переключаться между компонентами? можно ли изменить html 1 компонента и повторно использовать этот компонент?
@RukaDo вы можете сделать это с условиями *ngIf
Извините, позвольте мне переформулировать мою цель, я хотел бы иметь возможность сгенерировать шаблон в виде строки, а затем назначить эту строку элементу div, чтобы изменить его содержимое. Например, у меня есть навигация с двумя вариантами A и B. Когда я нажимаю A, моя таблица будет сгенерирована с количеством столбцов ObjectA.props, когда я нажму B, моя таблица будет сгенерирована с количеством столбцов ObjectB.props. Все это на 1 странице с компонентами nav, table. Если, пожалуйста, укажите, если это не имеет смысла
Это не имеет смысла при использовании Ангуляра. Angular не создан для такого поведения. В вашем примере ваши данные должны быть в массивах, и при нажатии на вашу навигацию измените текущий массив на тот, который соответствует выбранному элементу навигации.
Мои данные хранятся в виде объекта, и когда я нажимаю на навигацию, этот объект изменяется так, как должен. Единственная проблема заключается в том, чтобы восстановить таблицу на основе этого объекта. Я уже восстановил новый шаблон в виде строки в TS. Я просто не знаю, как переключить текущий шаблон таблицы на этот новый шаблон и скомпилировать его.
@RukaDo, если у вас есть два объекта, у вас есть 3 переменные: obj1, obj2, currentObj. Щелчок по навигационной панели обновит значение currentObj, эффективно изменив ссылку на память, тем самым перезагрузив таблицу.
Другое дело, что я использую Clarity в качестве своего CSS-фреймворка. Мой старый код с innerHTML изменяет HTML-код, но фреймворк не работает.
<clr-datagrid> — это компонент Angular (или, по крайней мере, веб-компонент, но после прочтения документации я увидел, что это компонент Angular), а не только какой-то CSS.
хм, так можно ли обновить содержимое clr-data-grid (html), а затем скомпилировать его? По содержанию я имею в виду изменение количества столбцов в качестве его данных, то есть совершенно другую сетку данных. Извините за мое невежество, я новичок в angular
@RukaDo многое нужно изменить, вы должны сделать два компонента. Но да, вы можете, и опять же, это делается с помощью шаблонов.
Спасибо за быстрый ответ