refactor(module:flex): refactor control flow (#8337)

NG-ZORRO · Jan 4, 2024 · edbe038 · edbe038
1 parent d788956
commit edbe038
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/components/flex/demo/gap.ts b/components/flex/demo/gap.ts
@@ -7,9 +7,9 @@ import { Component } from '@angular/core';
       <span>Select gap:</span>
       <nz-segmented [nzOptions]="gapSegment" [(ngModel)]="selectedGap"></nz-segmented>
     </div>
-    <ng-container *ngIf="gapSegment[selectedGap] === 'custom'">
-      <nz-slider [nzMin]="0" [nzMax]="100" [(ngModel)]="customGapValue"></nz-slider>
-    </ng-container>
+    @if (gapSegment[selectedGap] === 'custom') {
+      <nz-slider [nzMin]="0" [nzMax]="100" [(ngModel)]="customGapValue" />
+    }
     <div
       nz-flex
       [nzGap]="

diff --git a/components/flex/demo/wrap.ts b/components/flex/demo/wrap.ts
@@ -10,9 +10,9 @@ import { NzWrap } from 'ng-zorro-antd/flex';
       <nz-segmented [nzOptions]="wrapSegment" [(ngModel)]="selectedWrap"></nz-segmented>
     </div>
     <div class="btn-wrapper" nz-flex [nzGap]="'middle'" [nzWrap]="wrapSegment[selectedWrap]">
-      <ng-container *ngFor="let _ of [].constructor(20); let index = index">
-        <button style="width: 100px" nz-button nzType="primary">Button {{ index + 1 }}</button>
-      </ng-container>
+      @for (_ of array; track _) {
+        <button style="width: 100px" nz-button nzType="primary">Button {{ _ }}</button>
+      }
     </div>
   `,
   styles: [
@@ -33,6 +33,7 @@ import { NzWrap } from 'ng-zorro-antd/flex';
   ]
 })
 export class NzDemoFlexWrapComponent {
-  public wrapSegment: NzWrap[] = ['wrap', 'wrap-reverse', 'nowrap'];
-  public selectedWrap = 0;
+  wrapSegment: NzWrap[] = ['wrap', 'wrap-reverse', 'nowrap'];
+  selectedWrap = 0;
+  array = Array.from({ length: 20 }, (_, index) => index + 1);
 }