尝试根据 ng-if 条件在 HTML 中提供超链接...不起作用

Question

我想使用 ng-if 提供基于文本的条件 link。如果函数 return true 我想提供 link，否则只显示没有 link.

的值

<th style="text-align:left">
<span ng-if="(mandalLink())">
<a ng-href="/#!/l2-mandal/{{department}}/{{d}}" title="Click to see data at Mandal Level">{{d}}</a>
</span>
<span ng-if="(!mandalLink())"> {{d}} </span>
</th>

我在其他地方使用过 ng-if 并且可以正常工作，但在这种情况下却不行。我在这里做错了什么？

Answer 1

在您的 .html- 文件中尝试：

<th style="text-align:left">
  <span ng-if="showLink">
    <a ng-href="/#!/l2-mandal/{{department}}/{{d}}" title="Click to see data at Mandal Level">{{d}}</a>
  </span>
  <span ng-if="!showLink"> {{d}} </span>
</th>

在您的 .ts 文件中（在 ngOnInit 上或您 get/assign 一个值 'department'..）

showLink;

getDepartmentOrWhatEver(){
    ... // your logic getting 'department' assigned
   if (department == "") {
      this.showLink= false;
   }
   else {
      this.showLink= true;
   }
}

来自 ng-if 上的文档：

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes.

仅供参考：函数周围不需要括号，<span ng-if="mandalLink()"> 就可以了..

尝试根据 ng-if 条件在 HTML 中提供超链接...不起作用

Trying to provide hyperlink in HTML based on ng-if condition...not working

angular-ng-if