Стили Css не применяются динамически с использованием [style.width.%] Или [ngStyle] в Angular Материал

Question

Я использую функцию возврата для вызова и html

Функция возврата в .ts

 GetHtmlString(user) {
    return `
        <div class="custom-progressbar">
          <div *ngIf="user.HFPassed > 0"  [ngStyle]= "{ 'width':GetFlexValue(user.HFPassed, user) }" class="stat-bar bar-pass"></div>
      <div *ngIf="user.HFInProgress > 0" [style.width]="GetFlexValue(user.HFInProgress, user)" class="stat-bar bar-inprogress"></div>
      <div *ngIf="user.HFTodo > 0" [ngStyle]= "{ 'width':GetFlexValue(user.HFTodo, user) }" class="stat-bar bar-todo"></div>
      <div *ngIf="user.HFExpiring > 0" [style.width]="GetFlexValue(user.HFExpiring, user)" class="stat-bar bar-expiring"></div>
      <div *ngIf="user.HFExpired > 0" [style.width]="GetFlexValue(user.HFExpired, user)" class="stat-bar bar-expire"></div>
      <div *ngIf="user.HFFail > 0" [style.width]="GetFlexValue(user.HFFail,user)" class="stat-bar bar-fail"></div>
        </div>`;
  }

Я просто устанавливаю некоторое значение в GetFlexValue(user.HFPassed, user) как 50 я все еще не сделал атрибут ширины, когда я проверяю свой div

Простой сценарий - я создаю html внутри моей таблицы материалов angualr и вызываю эту функцию в моем тд для вставки html. Использовал как [ngStyle], так и [style.width], но бесполезно ...

Я использую Angular Материал также испробовал все формы решения Динамически обновляющееся css в Angular 2

Answer 1

На самом деле вы не вызываете функцию GetFlexValue, так как это полная строка.

Кроме того, вам необходимо санировать этот html перед использованием.

import { DomSanitizer } from '@angular/platform-browser';

Для этого используйте, как показано ниже :

getHtmlString(user) {
  return this.sanitized.bypassSecurityTrustHtml(`
        <div class="custom-progressbar">
          <div *ngIf="user.HFPassed > 0"
          style="width:` + this.GetFlexValue(user.HFInProgress, user) + `px"></div>
        </div>`);
}

Вот блик стека ссылка

Answer 2

Как насчет использования [style.width.%]="GetFlexValue()"

т.е. HTML Файл

<div class="box" [style.width.%]="GetFlexValue()" ></div>

Файл компонента

export class AppComponent  {
  constructor(){}

  GetFlexValue(){
    return 50;
  }
}

stackblitz: https://stackblitz.com/edit/angular-ncr4nf

Answer 3

Пожалуйста, используйте [ngStyle], это установит ширину содержащего элемента в процентное значение, возвращаемое выражением.

GetHtmlString(user) {
    return `
        <div class="custom-progressbar">
          <div *ngIf="user.HFPassed > 0" [ngStyle]="{'width.%': GetFlexValue(user.HFPassed, user)"></div>
        </div>`;
  }

Ссылочные ссылки - https://angular.io/api/common/NgStyle