refactor(module:rate): use the new control flow (#8483)

NG-ZORRO · Apr 9, 2024 · b678b18 · b678b18
1 parent 201a4ff
commit b678b18
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 26 deletions.
diff --git a/components/rate/demo/customize.ts b/components/rate/demo/customize.ts
@@ -11,13 +11,23 @@ import { Component } from '@angular/core';
       {{ index + 1 }}
     </ng-template>
     <ng-template #characterIcon let-index>
-      <ng-container [ngSwitch]="index">
-        <span nz-icon nzType="frown" *ngSwitchCase="0"></span>
-        <span nz-icon nzType="frown" *ngSwitchCase="1"></span>
-        <span nz-icon nzType="meh" *ngSwitchCase="2"></span>
-        <span nz-icon nzType="smile" *ngSwitchCase="3"></span>
-        <span nz-icon nzType="smile" *ngSwitchCase="4"></span>
-      </ng-container>
+      @switch (index) {
+        @case (0) {
+          <span nz-icon nzType="frown"></span>
+        }
+        @case (1) {
+          <span nz-icon nzType="frown"></span>
+        }
+        @case (2) {
+          <span nz-icon nzType="meh"></span>
+        }
+        @case (3) {
+          <span nz-icon nzType="smile"></span>
+        }
+        @case (4) {
+          <span nz-icon nzType="smile"></span>
+        }
+      }
     </ng-template>
   `,
   styles: [

diff --git a/components/rate/demo/text.ts b/components/rate/demo/text.ts
@@ -4,7 +4,9 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-rate-text',
   template: `
     <nz-rate [(ngModel)]="value" [nzTooltips]="tooltips"></nz-rate>
-    <span *ngIf="value" class="ant-rate-text">{{ value ? tooltips[value - 1] : '' }}</span>
+    @if (value) {
+      <span class="ant-rate-text">{{ value ? tooltips[value - 1] : '' }}</span>
+    }
   `
 })
 export class NzDemoRateTextComponent {

diff --git a/components/rate/rate.component.ts b/components/rate/rate.component.ts
@@ -5,7 +5,7 @@
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
-import { NgClass, NgForOf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -56,22 +56,23 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'rate';
       (mouseleave)="onRateLeave(); $event.stopPropagation()"
       [tabindex]="nzDisabled ? -1 : 1"
     >
-      <li
-        *ngFor="let star of starArray; let i = index"
-        class="ant-rate-star"
-        [ngClass]="starStyleArray[i] || ''"
-        nz-tooltip
-        [nzTooltipTitle]="nzTooltips[i]"
-      >
-        <div
-          nz-rate-item
-          [allowHalf]="nzAllowHalf"
-          [character]="nzCharacter"
-          [index]="i"
-          (itemHover)="onItemHover(i, $event)"
-          (itemClick)="onItemClick(i, $event)"
-        ></div>
-      </li>
+      @for (star of starArray; track star) {
+        <li
+          class="ant-rate-star"
+          [ngClass]="starStyleArray[$index] || ''"
+          nz-tooltip
+          [nzTooltipTitle]="nzTooltips[$index]"
+        >
+          <div
+            nz-rate-item
+            [allowHalf]="nzAllowHalf"
+            [character]="nzCharacter"
+            [index]="$index"
+            (itemHover)="onItemHover($index, $event)"
+            (itemClick)="onItemClick($index, $event)"
+          ></div>
+        </li>
+      }
     </ul>
   `,
   providers: [
@@ -82,7 +83,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'rate';
       multi: true
     }
   ],
-  imports: [NgClass, NgForOf, NzToolTipModule, NzRateItemComponent, NzToolTipModule],
+  imports: [NgClass, NzToolTipModule, NzRateItemComponent, NzToolTipModule],
   standalone: true
 })
 export class NzRateComponent implements OnInit, ControlValueAccessor, OnChanges {