Angular 2 如何避免模板中的许多条件（ngIf）？答案

【问题标题】：Angular 2 How to avoid many conditions (ngIf) in templates?Angular 2 如何避免模板中的许多条件（ngIf）？
【发布时间】：2017-02-07 11:47:09
【问题描述】：

在某些情况下，我在模板中有很多条件，例如我对 ngIf 有很多条件。我如何减少条件，最好使用一个条件来显示该 div，或者使用某种方法来处理条件和隐藏/显示元素。

<div (click)="createMessage()" class="message" *ngIf="array.length && message.queue && message.queue.length && !state || array.length && message.text && message.text.length && !state">
</div>

【问题讨论】：

将它们从模板中移出到组件类中并在*ngIf 中引用它，或者维护您在*ngIf 中使用的单个变量，该变量在条件之一发生变化时更新，这每次更改检测运行时不会执行表达式的方式。
谢谢，但对我来说一切都不清楚。如果我将在这种情况下使用一个变量，这个变量将如何在许多条件下更新？可以举个例子吗
每次表达式的任何部分发生更改时，您都需要更新此变量。我不知道这在你的情况下是否实用。我不知道您的代码何时会发生此类更改。
"每次表达式的任何部分发生变化时，您都需要更新此变量。"我不知道我应该怎么做:)

标签： angular

【解决方案1】：

比调用.html中的函数更好，您可以使用一个变量和每次您编写的消息或数组更改（我想在调用服务或单击按钮后添加一个元素到一个数组）

this.show=this.showCreateMessage(this.array,this.message)

然后一个简单的*ngIf="show" 就可以了

【讨论】：

【解决方案2】：

您可以通过从组件调用自定义方法来减少*ngIf 条件长度。

<div (click)="createMessage()" class="message" *ngIf="showCreateMessage(array,message)"></div>

//方法名没有意义，因为我不知道你的具体要求。

在你的组件中

showCreateMessage(array:any,message:any)
{
  return array.length && message.queue && message.queue.length && !state || array.length && message.text && message.text.length && !state;
}

【讨论】：

如果代码实际上不能内联运行，请不要使用片段功能。

【解决方案3】：

除非您将其委托给函数并传递参数，否则您无法真正将其简化为表达式一，但您可以尝试类似的方法：

*ngIf="!state && array.length && ( message?.queue.length || message?.text.length)"

【讨论】：

谢谢你，但我想我可以这样写：*ngIf="condition" or *ngIf="condition()"
当然，你可以写这样的东西。但不鼓励在绑定中使用函数，因为它们会被非常频繁地检查，并且可能会显着降低您的应用程序的速度。
@GünterZöchbauer 感谢您的最后评论，我正在寻找完全相同的主题。你知道我在哪里可以找到更多关于*ngIf="conditionInTemplate" 和*ngIf="conditionInComponent()" 之间区别（幕后）的信息吗？。
前者conditionInTemplate是一个字段或getter，后者是一个函数。您需要小心视图绑定中的 getter 和函数，它们可能会经常被调用。