比多个 ngIf 更好的方法

Question

我想让我的代码更短以便于阅读。对于列表的编号顺序，我有多个具有不同条件的 ngIf（例如 1、1.1、1.1.1）

这是我在模板端的代码

<span *ngIf="types.inputs.length > 1 && inputs.input.length > 1 && inputs.hasMultipleInput == true && inputs.hasMultipleSummaries == false && input.designSummaries.length == 1">{{in+1}}.{{inp+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && inputs.input.length > 1 && inputs.hasMultipleInput == true && inputs.hasMultipleSummaries == true && input.designSummaries.length == 1">{{in+1}}.{{inp+1}}.{{s+1}} ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == true && inputs.input.length == 1 && input.designSummaries.length == 1">{{in+1}}.{{inp+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == false && inputs.input.length == 1 && input.designSummaries.length == 1">{{in+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == true && inputs.input.length == 1 && input.designSummaries.length > 1">{{in+1}}.{{inp+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && types.hasMultipleInputs == false && inputs.input.length == 1 && input.designSummaries.length > 1">{{in+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length > 1 && input.designSummaries.length > 1">{{inp+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length > 1 && inputs.input.length > 1 && input.designSummaries.length > 1">{{in+1}}.{{inp+1}}.{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length > 1 && input.designSummaries.length == 1">{{inp+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length == 1 && input.designSummaries.length > 1">{{s+1}}. ({{sum.summary}})</span>
<span *ngIf="types.inputs.length == 1 && inputs.input.length == 1 && input.designSummaries.length == 1">({{sum.summary}})</span>

这将在其他专栏中重复并进行一些额外的插值，我只是不想在我的整个项目中使用这么长的代码。

我只想听听你们的建议:)

My code on stackblitz

Answer 1

您可以使用 ngSwitch，对 return ngSwithcase 值

执行函数

<div [ngSwitch]="hero?.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
</div>

Answer 2

您应该将所有逻辑放在一个方法（比方说getNumberingOrder()）中，returns 所需的string 并简单地显示它与 : <span>{{getNumberingOrder()}}</span>.

当然要给这个函数传参数

比多个 ngIf 更好的方法

Better way than multiple ngIf

typescript

angular-ng-if

angular

angular6