如何根据变量在剃须刀页面中有条件地呈现 div 类？答案

【问题标题】：How to render div class conditionally in razor page based on a variable?如何根据变量在剃须刀页面中有条件地呈现 div 类？
【发布时间】：2020-03-30 14:53:41
【问题描述】：

如何在 Angular 中根据条件渲染 div 类？

  <div class="@(myArray.length>0 ? "col-md-8" : "col-md-12" )">

我希望如果 myArray 长度大于 0，那么它应该是 col-md-8，否则它应该是 col-md-12。

我在脚本标签中定义了 $scope.myArray =[]。

【问题讨论】：

这个语法实际上看起来是正确的。尝试后会发生什么？
@flashsplat 它说“名称 myArray 在当前上下文中不存在”。即使我在脚本标签中定义了 $scope.myArray =[]。
您可能需要用 razor 语法定义它，例如：@{ string[] myArray = new string[1]; } 如果您的数组是在 javascript 中，那么我认为最好使用 addClass 或 removeClass。我发现两者之间的时间是不可预测的。
我做了 var finalObject = new Array[1];它说 Array[] 不包含 'length' 的定义，
你试过大写L吗？长度？

标签： javascript angularjs angularjs-directive

【解决方案1】：

我认为您会希望在 Javascript 或 Razor 中执行此操作，但不能同时使用两者。

如果您的数组来自您的控制器，您可以在 razor 中定义 myArray。只需将其放在@{ } 标签中即可。更多细节在这里：https://forums.asp.net/post/4532657.aspx

如果是 javascript，只需像这样设置：

HTML：

<div class="setCols">

Javascript/Jquery

if (typeof myArray != "undefined"  
            && myArray != null  
            && myArray.length > 0) 
    $(".setCols").addClass("col-md-8"); 
else 
    $(".setCols").addClass("col-md-12");

这些可能不是 100% 语法正确，但希望能让您走上正确的道路。

【讨论】：