Использовать локальную переменную в шаблоне html без компонента Angular2 +

Question

Я хочу использовать локальную переменную в своем HTML-шаблоне, чтобы использовать ее в классах CSS, но без привязки к компоненту.Я хочу сделать это:

[local_html_variable = 1]

    <div class="css-{{ local_html_variable }}">
            Div #1
        </div>

[local_html_variable + 1]

        <div class="css-{{ local_html_variable }}">
            Div #2
        </div>

[local_html_variable + 1]

        <div class="css-{{ local_html_variable }}">
            Div #3
        </div>

        ...

, чтобы получить

<div class="css-1">
        Div #1
    </div>

    <div class="css-2">
        Div #2
    </div>

    <div class="css-3">
        Div #3
    </div>

    ...

Важно: число div является динамическим.Но я не достигаю этого.Я пытался с <ng-template let-localHtmlVariable>, но не работал .. Есть идеи?

Answer 1

Вы можете использовать * ngДля структурной директивы

<div *ngFor="let value of [1,2,3]" class="css-{{value}}">
   DIV #{{value}}
</div>

Answer 2

Вот очень ситуативный ответ, который использует преимущества истинных / ложных значений:

<ng-container *ngIf="1 as i">
  Number is {{ i }}
</ng-container>

Используйте его в своих классах в самом контейнере:

<div class="css-{{ i }}">With interpolation</div>
<div [class]="'css-' +  i">With input</div>

Вот стэкблиц: https://stackblitz.com/edit/angular-3wm4en?file=src%2Fapp%2Fapp.component.html

РЕДАКТИРОВАТЬ пояснение:

В javascript каждое значение может быть преобразовано в логическое значение: это значения true или false.

Оператор быстрого логического анализа - это !! двойное отрицание.

Давайте попробуем:

console.log(!!'');
console.log(!!0);
console.log(!!5);

Когда мы используем эту запись, оценка использует тот же принцип: она проверяет, является ли данное значение истинным или ложным.В цифрах, если 1 соответствует действительности, тест проверяется, и запись as i просто создает переменную шаблона.

Для информации, ложные значения: 0, '', null, undefined, infinity, NaN.