如何使用角度渲染器2将垫子图标动态添加到div

Question

我有一个HTML，里面有很多div。我已经生成了这样的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(图标，'svgIcon'，'"wb_sunny"')；

• this.renderer.setProperty(图标，'svgIcon'，'wb_sunny')；

• this.renderer.setAttribute(图标，'svgIcon'，'"brightness_3"')；

• this.renderer.setAttribute(图标，'svgIcon'，'brightness3')；

• this.renderer.appendChild(图标，this.render.createText("正确性"))；

• this.renderer.appendChild(图标，'brightness_3')；

这些选项都不起作用。我还尝试了iconName而不是svgIcon。

我应该如何使用render2添加iconName或svgIcon？

Answer 1

我想明白了。当我尝试用渲染器createText添加垫子图标值时，我注意到了什么。它添加得很正确。问题是IconName在html中显示为名称而不是图标。所以我意识到css不见了。我查看了开发工具并查看了div和mat图标。我发现他们缺课了。

所以我手动添加了这些类。

简而言之

您需要创建垫子图标元素。

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);
}
}