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

【问题标题】：using ngIf to check array length or content to display div使用 ngIf 检查数组长度或内容以显示 div
【发布时间】：2017-10-23 06:26:34
【问题描述】：

我想根据数据数组的长度来控制是否显示我的 div。如果有数据继续显示 div，如果没有，则将其隐藏。我正在使用 *ngIf 但我想询问两种不同的方式，以及一种是否比另一种更好，也许是为什么。

*ngIf="dataArray?"

或

*ngIf="dataArray?.length > 0"

【问题讨论】：

第二个，您可能希望将该逻辑放入组件中，并将最终的布尔属性公开给模板。这不是必需的，但它是一个很好的做法，特别是如果您的方式/隐藏逻辑可能会改变并变得更加复杂。
*ngIf="dataArray.length > 0" 这对你有用，请检查一下
@deezg 当你的意思是我把逻辑放在组件中它会是什么样子？ public hasData: dataArray?.length > 0; 会这样工作，然后在我的 html 中我将只有 *ngIf="hasData"?
对于 cmets 来说太长了，所以我已经回答了

标签： angular

【解决方案1】：

为了回答你的问题，你想要实现的功能可以通过第二种方式来完成：

*ngIf="dataArray?.length > 0"

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

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

*ngIf="dataArray?.length"

或

*ngIf="!!dataArray?.length"

第一种选择，使用数组长度不能小于 0 并且 0 是 falsy 并且 >0 是 truthy 的事实。第二种选择将真/假状态显式转换为真或假。

我更喜欢这样写：

*ngIf="dataArray?.length"

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

我同意有可用的缩小器可以为我们做到这一点，但在某些情况下它们可能不像模板表达式那样工作。

转向组件：这就是 Angular 的起点。我想说这真的取决于权衡，没有是-否的答案。对于我们目前正在开发的大型 Angular4 应用程序，我们不会移动这些。但是如果有一些额外的条件或者涉及更多的逻辑，我们会移动它的组件并设置一个标志。所以，为了回答你的问题，如果你真的想进一步优化这个，那么你可以使用一个标志来代替，在元素被添加到数组的地方，将它设置为 true。

我是这么理解的。如果有人有更多补充或更正，请写在cmets中。

【讨论】：

我非常感谢您的解释。您还建议将逻辑移至组件还是不会有太大变化？
没问题。我刚刚编辑了我的答案以在这部分添加我的 cmets。希望这可以帮助！如果是，请接受答案... :)

【解决方案2】：

第一个

*ngIf="dataArray"

检查元素是否已定义。

*ngIf="dataArray?.length > 0"

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

你应该做第二种方式。

【讨论】：

dataArray 只是我的意思

【解决方案3】：

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

类似：

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

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

在模板中：

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

现在，这取决于您获得阵列的方式和时间。如果它是静态的，你可以在组件ngOnInit 中调用procesCondition，如果它是可观察的，你需要在ngOnChanges 钩子中检查它。

【讨论】：

【解决方案4】：

*ngIf="dataArray?" =>这会检查是否定义了dataArray（在你的情况下不是最好的）或

*ngIf="dataArray?.length > 0" =>这会检查是否定义了 dataArray 并且（在你的情况下最好）

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

第二个是经常检查变量是否定义的好习惯

【讨论】：