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

您可以使用* ngFor结构化指令

obj.query.pages

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中，每个值都可以转换为布尔值：它们是真实值或虚假值。

快速布尔分析运算符是!!双重否定。

让我们尝试：

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

当我们使用这种表示法时，评估使用相同的原理：它测试给定的值是真实的还是虚假的。以数字表示，1为真，测试将检出，as i表示法只是创建一个模板变量。

有关信息，虚假值为0, '', null, undefined, infinity, NaN。

在没有组件Angular2 +的模板html中使用局部变量

2 个答案: