docs(form:select): update demo (#1851)

ng-alain · Nov 25, 2024 · 8461d9c · 8461d9c
1 parent 4041611
commit 8461d9c
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/packages/form/src/widgets/select/demo/simple.md b/packages/form/src/widgets/select/demo/simple.md
@@ -26,13 +26,26 @@ import { NzMessageService } from 'ng-zorro-antd/message';
   template: `
     <sf #sf [schema]="schema" (formSubmit)="submit($event)" />
     <button nz-button (click)="updateStatus()">Update Status</button>
+    <button nz-button (click)="updateAsyncData()">Update async data</button>
   `,
   standalone: true,
   imports: [DelonFormModule, NzButtonModule]
 })
 export class DemoComponent {
   private readonly msg = inject(NzMessageService);
   @ViewChild('sf', { static: false }) private sf!: SFComponent;
+  asyncData = [
+    {
+      label: '订单状态',
+      group: true,
+      children: [
+        { label: '待支付', value: 'WAIT_BUYER_PAY' },
+        { label: '已支付', value: 'TRADE_SUCCESS' },
+        { label: '交易完成', value: 'TRADE_FINISHED' }
+      ]
+    }
+  ];
+  delay = 1200;
   schema: SFSchema = {
     properties: {
       status: {
@@ -71,18 +84,7 @@ export class DemoComponent {
         default: 'WAIT_BUYER_PAY',
         ui: {
           widget: 'select',
-          asyncData: () =>
-            of([
-              {
-                label: '订单状态',
-                group: true,
-                children: [
-                  { label: '待支付', value: 'WAIT_BUYER_PAY' },
-                  { label: '已支付', value: 'TRADE_SUCCESS' },
-                  { label: '交易完成', value: 'TRADE_FINISHED' }
-                ]
-              }
-            ]).pipe(delay(1200))
+          asyncData: () => of(this.asyncData).pipe(delay(this.delay))
         } as SFSelectWidgetSchema
       },
       hide: {
@@ -107,5 +109,23 @@ export class DemoComponent {
     statusProperty.schema.enum = ['1', '2', '3'];
     statusProperty.widget.reset('2');
   }
+
+  updateAsyncData(): void {
+    this.delay = 0;
+    this.asyncData = [
+      {
+        label: 'Order Status',
+        group: true,
+        children: [
+          { label: 'Wait buyer pay', value: 'WAIT_BUYER_PAY' },
+          { label: 'Trade success', value: 'TRADE_SUCCESS' },
+          { label: 'Trade finished', value: 'TRADE_FINISHED' }
+        ]
+      }
+    ];
+    // Reset the value to make the element load data again
+    const updatePath = '/async';
+    this.sf.setValue(updatePath, this.sf.getProperty(updatePath)?.value);
+  }
 }
 ```