Question

在某些情况下，我在模板中有很多条件，例如我有很多条件进入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>

Answer 1

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

Answer 2

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

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

Answer 3

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

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

然后用一个简单的*ngIf="show"来解决问题

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

3 个答案: