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

在某些情况下，我在模板中有很多条件，例如我有很多条件进ngIf。我怎样才能减少条件，最好用一个条件来显示div，或者使用一些方法来处理条件并隐藏/显示元素。Angular 2如何避免模板中的许多条件（ngIf）？

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

来源

2016-09-29 marcos

移动出来的模板到组件类，并指它在'* ngIf'或维护您在'* ngIf'被更新时，使用一个变量其中一个条件发生变化，这样每次运行变化检测时都不会执行表达式。 –

谢谢，但一切都不清楚。如果我将在这种情况下使用一个变量这个变量将如何更新许多条件？你能给我举个例子吗？ – marcos

你需要每次表达式的任何部分改变时更新这个变量。我不知道这是否适合您的情况。我不知道你的代码发生了什么样的变化。 –

你通过调用组件的自定义方法可以减少*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; 
}

来源

2016-09-29 11:03:03 Nisam

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

你真的不能将其降低到一个表达，除非你委托到这个函数，传递参数，但你可以尝试这样的：

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

来源

2016-09-29 08:54:20 MatWaligora

谢谢你，但我想我可以写水木清华这样的：* ngIf =“条件”或* ngIf =“条件（）” – marcos

当然，你可以写类似的东西。不建议在绑定中使用函数，因为它们会被频繁检查，并且可能会使应用程序变慢。 –

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

回答

相关问题