在没有组件Angular2+的模板html中使用局部变量
在没有组件Angular2+的模板html中使用局部变量
提问于 2018-11-22 21:56:05
我想在我的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>，但不起作用..有什么想法吗？
回答 2
Stack Overflow用户
发布于 2018-11-22 22:11:36
您可以使用*ngFor structural指令
<div *ngFor="let value of [1,2,3]" class="css-{{value}}">
DIV #{{value}}
</div>Stack Overflow用户
发布于 2018-11-22 22:06:20
这是一个非常符合实际情况的答案，它利用了真实/错误的值：
<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>下面是stackblitz：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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53432556
复制相关文章
相似问题
腾讯云开发者
