![](/img/trans.png)
[英]Angular 9 - How to add a mat-icon dynamically inside HTML page?
[英]How to dynamically add mat-icon to divs with angular renderer2?
我有一个包含很多 div 的 HTML。 我已经生成了看起来像这样的 div。
使用 renderer2 的所需结果的静态 HTML(非动态生成)示例
<div class="time-rowss clearfixx" #timerowss> <div><mat-icon>today</mat-icon> date </div> </div> <div class="time-rows clearfix" #timerows> <div><mat-icon>brightness_3</mat-icon>00:00</div> <div><mat-icon>brightness_3</mat-icon>01:00</div> <div><mat-icon>brightness_3</mat-icon>02:00</div> </div>
我想实现相同但动态生成 div。
到目前为止我所做的是动态添加时间和日期。
这是我的代码:
for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
time = newTime;
const date = this.renderer.createElement('div');
this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
this.renderer.appendChild(this.d7.nativeElement, date);
for (let i = 0; i < 24; i++) {
const b = this.renderer.createElement('div');
const icon = this.renderer.createElement('mat-icon');
if (i < 7 || i > 18) {
this.renderer.setAttribute(icon, 'svgIcon', '"brightness_3"');
} else {
this.renderer.setProperty(icon, 'svgIcon', '"wb_sunny"');
}
let text;
if (i >= 10) {
text = ' ' + i;
} else {
text = '0' + i;
}
this.renderer.appendChild(b, icon);
this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
this.renderer.appendChild(this.d3.nativeElement, b);
}
}
我尝试了几种选择:
this.renderer.setProperty(icon, 'svgIcon', '"wb_sunny"');
this.renderer.setProperty(icon, 'svgIcon', 'wb_sunny');
this.renderer.setAttribute(icon, 'svgIcon', '"brightness_3"');
this.renderer.setAttribute(icon, 'svgIcon', 'brightness_3');
this.renderer.appendChild(icon, this.renderer.createText('brightness'));
this.renderer.appendChild(icon, 'brightness_3');
这些选项都不起作用。 我还尝试了 iconName 而不是 svgIcon。
我应该如何使用 renderer2 添加 iconName 或 svgIcon?
我想到了。 当我尝试使用渲染器 createText 添加 mat-icon 值时,我注意到了什么。 它正在正确添加它。 问题是 IconName 在 html 中作为名称而不是图标出现。 所以我意识到 css 丢失了。 我查看了开发工具并检查了 div 和 mat-icons。 我发现他们缺课了。
所以我手动添加了类。
简而言之
您需要创建垫图标元素。
const dateIcon = this.renderer.createElement('mat-icon');
使用 createText 添加值。
this.renderer.appendChild(dateIcon, this.renderer.createText('today'));
为 css 样式提供类。
this.renderer.addClass(dateIcon, 'mat-icon');
this.renderer.addClass(dateIcon, 'material-icons');
如果好奇,请提供完整代码。 -->
for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
time = newTime;
const date = this.renderer.createElement('div');
const dateIcon = this.renderer.createElement('mat-icon');
this.renderer.appendChild(dateIcon, this.renderer.createText('today'));
this.renderer.addClass(dateIcon, 'mat-icon');
this.renderer.addClass(dateIcon, 'material-icons');
this.renderer.appendChild(date, dateIcon);
this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
this.renderer.appendChild(this.d7.nativeElement, date);
for (let i = 0; i < 24; i++) {
const b = this.renderer.createElement('div');
const icon = this.renderer.createElement('mat-icon');
if (i < 7 || i > 18) {
this.renderer.appendChild(icon, this.renderer.createText('brightness_3'));
} else {
this.renderer.appendChild(icon, this.renderer.createText('wb_sunny'));
}
let text;
if (i >= 10) {
text = ' ' + i;
} else {
text = '0' + i;
}
this.renderer.appendChild(b, icon);
this.renderer.addClass(icon, 'mat-icon');
this.renderer.addClass(icon, 'material-icons');
this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
this.renderer.appendChild(this.d3.nativeElement, b);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.