Как динамически добавить mat-icon в div с угловым renderer2? - PullRequest
Новая
       6

Как динамически добавить mat-icon в div с угловым renderer2?

0 голосов
/ 20 декабря 2018

У меня есть HTML с большим количеством div.Я уже сгенерировал div, которые выглядят следующим образом.

статический HTML (не генерируется динамически) пример желаемого результата с использованием renderer2 

    <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', '"bright_3"');

  • this.renderer.setAttribute (icon, 'svgIcon', 'Bright_3');

  • this.renderer.appendChild (icon, this.renderer.createText ('Brightness)));

  • this.renderer.appendChild (icon, 'Bright_3');

, ни один из этих параметров не работает.Я также пробовал iconName вместо svgIcon.

как мне добавить iconName или svgIcon с renderer2?

1 Ответ

0 голосов
/ 24 декабря 2018

Я понял это.То, что я заметил, когда пытался добавить значение mat-icon с помощью рендерера createText.Это было добавление это правильно.Проблема заключалась в том, что IconName отображалось в html как имя, а не как значок.Таким образом, я понял, что CSS отсутствует.Я посмотрел на инструменты разработчика и осмотрел div и иконки матов.Я обнаружил, что в них отсутствовали классы.

Поэтому я добавил классы вручную.

Короче говоря

вам нужно создать мат-icon element . 

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