在显示 HTML 之前检查 JS 值是不是存在

Posted 2023-02-23

【中文标题】在显示 HTML 之前检查 JS 值是不是存在

【英文标题】：check if JS value exists before displaying HTML在显示 HTML 之前检查 JS 值是否存在

【发布时间】：2020-01-14 12:02:17

【问题描述】：

我想显示以下带有角度值的 html；仅当值存在时，我如何将以下内容包装在 if 语句中，以检查值是否首先存在，然后是否存在；显示这个内部 html。

我想内联执行此操作；理想情况下使用三元运算符。

<span class="bloCK" ng-mouseover="showPopover()" ng-mouseleave="hidePopover()"><a href="website.coolUrl" target="_blank">Cool Website</a></span>

【问题讨论】：

您使用的是哪个版本的 Angular？因为这看起来更像 AngularJS，和 Angular 有很大的不同...

AngularJS 你是对的；对不起我的错字！

How can I conditionally display HTML in a button using AngularJS?的可能重复

【参考方案1】：

我猜你所说的“价值”是website.coolUrl，在这种情况下你可以这样做：

<span ng-if="website && website.coolUrl"
    class="bloCK" ng-mouseover="showPopover()"
    ng-mouseleave="hidePopover()">
  <a href="website.coolUrl" target="_blank">Cool Website</a></span>

更新...糟糕！

只有在我发布此内容后，我才看到您指的是 AngularJS，而不是 Angular。我为此修改了答案，但我已经很久没有做过任何 AngularJS 了。

【讨论】：

ng-if="website && website.coolUrl" 没有意义，简单的 ng-if="website.coolUrl" 也一样。为了避免问题，人们总是更喜欢 ng-href 而不是 href

由于我没有所有的情况细节，我无法确定website 本身是否总是可以被定义。在这种情况下，website && website.coolUrl 更安全，因为它可以防止尝试访问可能未定义值的属性。我不确定 AngularJS，但 Angular 还支持website?.coolUrl 的形式以进行安全导航。

我知道从 Angular 的角度来看它可能看起来“更安全”:) 但是在 AngularJS 世界中，模板从不抱怨某些东西是未定义的。它可以为您节省大量代码......例如"a && a.b && a.b.c && a.b.c.d"