Question

我有一个包含很多div的HTML。我已经生成了看起来像这样的div。

使用渲染器2的

静态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？

Answer 1

我知道了。我在尝试使用渲染器createText添加mat-icon值时注意到了我。它添加正确。问题是IconName在html中作为名称而不是作为图标出现。因此，我意识到CSS丢失了。我研究了开发工具，并检查了div和mat-icons。我发现他们缺少课程。

所以我手动添加了类。

简而言之

您需要创建Mat-icon元素。

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

如何使用角度渲染器2向div动态添加mat-icon？

1 个答案: