angular - 比多个 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>

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

我只是想从你们那里得到任何建议:)

我在 stackblitz 上的代码

标签： angulartypescriptangular6angular-ng-if

Answer 1

您可以使用ngSwitch, do 函数返回一个 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>