Question

我想控制是否显示我的div，具体取决于数据数组的长度。如果有数据继续显示div，如果没有，那么只是隐藏它。我正在使用* ngIf，但我想询问两种不同的方式，如果一种比另一种更好，也许是为什么。

*ngIf="dataArray?"

或

*ngIf="dataArray?.length > 0"

Answer 1

要回答您的问题，您可以使用第二种方式完成您想要实现的功能：

*ngIf="dataArray?.length > 0"

因为这确实是在测试数组是否存在且其长度大于零（正如Sajeetharan在他的回答中所提到的那样）。

它也可以通过以下两种不同的方式来实现相同的结果：

*ngIf="dataArray?.length"

或

*ngIf="!!dataArray?.length"

第一种选择，使用数组长度不能小于0且0 falsy 且＆gt; 0 truthy 的事实。第二种方法明确地将truthy / falsy状态转换为true或false。

我更愿意这样写：

*ngIf="dataArray?.length"

在编写JS时，我倾向于编写简洁的代码，并最终在可读性和紧凑性之间进行权衡。这主要是因为JS是解释语言，简洁的代码可以提高效率。

我同意有些minifiers可以为我们这样做，但在某些情况下它们可能不像模板表达式那样工作。

移动到组件：这是Angular开始的地方。我会说这实际上取决于权衡取舍，并且没有“是 - 否”答案。对于我正在研究的当前大型Angular4应用程序，我们并没有提出这些应用程序。但是如果有一些额外的条件或涉及更多的逻辑，我们移动它组件并设置一个标志。所以，要回答你的问题，如果你真的想进一步优化它，那么你可以使用一个标志，并在元素添加到数组的位置，将其设置为true。

这就是我理解它的方式。如果有人有更多要添加或更正，请写下评论。

Answer 2

第一个

*ngIf="dataArray"

检查元素是否已定义。

*ngIf="dataArray?.length > 0"

这个检查元素是否存在以及内部值的长度。

你应该做第二种方式。

Answer 3

[继续发表评论] 我可以想象你可能需要的道路，例如，如果数组中有元素但没有propertyX > 7或任何其他条件的元素，则不显示元素。因此，对于一般情况，您希望在组件上具有布尔属性并将其放到*ngIf。

类似的东西：

export class YourComponent{
  myArray:[];
  shouldShowMyDiv:boolean;

  private procesCondition(){
    this.shouldShowMyDiv = this.myArray.whateverconditions....
  }
}

并在模板中：

<div *ngIf="shouldShowMyDiv">...</div>

现在，这取决于你何时获得阵列。如果是静态的，您可以在组件procesCondition中调用ngOnInit，如果是可观察的，则需要在ngOnChanges挂钩中进行检查。

Answer 4

* ngIf =＆＃34; dataArray中＆＃34？; =＆GT;这将检查是否定义了dataArray（在您的情况下不是更好）或

* ngIf =＆＃34; dataArray？.length＆gt; 0＆＃34; =＆gt;这将检查是否定义了dataArray和（在您的情况下是优先的）

如果已定义，则获取长度
然后检查长度是否大于0。如果大于ZERO则显示div

第二个是好的做法，总是检查是否定义了变量

使用ngIf检查数组长度或内容以显示div

4 个答案: