@for 控制流與特殊變數

@empty 語法

@empty 是用在 @for 的後面，用來指定當要循環的陣列裡沒有值的時候該如何顯示內容。

範例：

htmlCopy<ul>
  @for (ticket of tickets; track ticket.id) {
    <li>
      <app-ticket />
    </li>
  } @empty {
    <p>no tickets available.</p>
  }
</ul>

當 tickets 陣列為空時，會顯示 "no tickets available."。

---

@for 中可使用的特殊變數

在 @for 循環中，Angular 提供了幾個特殊變數，可以幫助我們更靈活地處理循環項目：

$first

會在第一個項目中為 true，其他項目則為 false。適合用來為第一個項目添加特殊樣式或行為。

htmlCopy<div>
  <ul>
    @for (ticket of tickets; track ticket.id) {
      <li><app-ticket /> - {{ $first }}</li>
    } @empty {
      <p>no tickets available.</p>
    }
  </ul>
</div>

其他特殊變數

• $last：最後一個項目為 true，適合用在分隔符號的處理（例如移除最後項目後的逗號）。

• $odd：奇數項目（1, 3, 5...）為 true，適合用在設置交替行樣式。

• $even：偶數項目（0, 2, 4...）為 true，同樣適合用在設置交替行樣式。

• $count：所有項目的總數量，適合顯示總數或用於計算。

實際應用範例

htmlCopy<ul class="ticket-list">
  @for (ticket of tickets; track ticket.id; let i = $index) {
    <li [class.highlighted]="$first"
        [class.odd-row]="$odd"
        [class.even-row]="$even"
        [class.last-item]="$last">
      {{ i + 1 }}/{{ $count }}: <app-ticket [ticketData]="ticket" />
      @if (!$last) {
        <hr class="separator">
      }
    </li>
  } @empty {
    <p class="no-data">目前沒有待處理的工單</p>
  }
</ul>