Question

我最近开始学习Angular2。

我想知道是否有可能使用ngSwitch或ngIf angular2

特定数值范围的指令？

假设我想根据范围更新某些文字的颜色。

    if (hrow == null) {
        /* we removed this check, see bug 47245 for the discussion around this
        // Some tools (like Perl module Spreadsheet::WriteExcel - bug 41187) skip the RowRecords
        // Excel, OpenOffice.org and GoogleDocs are all OK with this, so POI should be too.
        if (rowRecordsAlreadyPresent) {
            // if at least one row record is present, all should be present.
            throw new RuntimeException("Unexpected missing row when some rows already present");
        }*/

        // create the row record on the fly now.
        RowRecord rowRec = new RowRecord(cval.getRow());
        sheet.addRow(rowRec);
        hrow = createRowFromRecord(rowRec);
    }

如何使用Angular2 ngIf / ngSwitch指令实现相同目的。

有没有办法写这样的东西？

<25 = Mark the text in red
>25 && <75 = Mark the text in orange
>75 = Mark the text in green

或任何与使用ngSwitch，ngSwitchWhen语句有关的事情。

Answer 1

使用*ngIf，您可以这样做：

<div *ngIf="item.status < 25">
    <h2 class="headline text-red">{{item.status}}</h2>
</div>
<div *ngIf="item.status > 25 && item.status < 75">
    <h2 class="headline text-orange">{{item.status}}</h2>
</div>
<div *ngIf="item.status > 75">
    <h2 class="headline text-green">{{item.status}}</h2>
</div>

使用[ngSwitch]语法如下：

<div [ngSwitch]="true">
    <h2 *ngSwitchCase="item.status < 25" class="headline text-red">{{item.status}}</h2>
    <h2 *ngSwitchCase="item.status > 25 && item.status < 75" class="headline text-orange">{{item.status}}</h2>
    <h2 *ngSwitchDefault class="headline text-green">{{item.status}}</h2>
</div>

快速笔记

旧版*ngSwitchWhen现在可用作*ngSwitchCase
item.status > 75及以上的案例由*ngSwitchDefault

Answer 2

这可能有效，但我自己没有尝试过：

<div [ngSwitch]="value">
  <p *ngSwitchCase="'init'">increment to start</p>
  <p *ngSwitchCase="item.status < 25 ? value">a</p>
  <p *ngSwitchCase="item.status > 25 && item.status < 75 ? value ">c</p>
  <p *ngSwitchCase="item.status > 75 ? value">d</p>
  <p *ngSwitchDefault>else</p>
</div>

这个想法是当表达式为真时，返回value *ngSwitchWhen以匹配[ngSwitch]值。

Answer 3

我建议你将逻辑移到组件上，你的样板更少，而且更容易使用：

<div>
  <h2 [class]="switchClass(item.status)">{{item.status}}</h2>
</div>

switchClass(item.status) {
  if (item.status < 25) return "text-red";
  else if (25 < items.status && item.status < 75) return "headline text-orange";
  else if (75 < items.status) return "headline text-green";
}

虽然你可以写：

<div *ngIf="(item.status > 25) && (item.status < 75)">

Answer 4

在处理angular2条件样式时，最好在添加单个类时使用[class]，或者在返回类似数组时使用[ngClass]：headline text-green someOtherClass。

// display div
<div [ngClass]="getItemClass(item.status)">{{item.status}}</div>

// logic
getItemClass(status) {
  let itemClass: string;

  if (status < 25) {
    itemClass = 'text-red';
  } else if (status > 25 && status < 75) {
    itemClass = 'headline text-orange';
  } else {
    itemClass = 'headline text-green';
  }

  return itemClass;
}

同样，我们可以将itemClass声明为数组，而不是将let itemClass: Array<string>;声明为数组，在这种情况下，我们将if块重新分配为itemClass = ['headline', 'text-green']。这也很好。

在Angular 2中的数值范围上使用ngSwitch

4 个答案: