fix(abc:st): fix can't render when data changed (#1398)

ng-alain · Nov 24, 2021 · 8151a53 · 8151a53
1 parent b9ea6cd
commit 8151a53
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 29 deletions.
diff --git a/packages/abc/st/demo/checkbox.md b/packages/abc/st/demo/checkbox.md
@@ -15,17 +15,23 @@ Use `change` event get selected data.
 
 ```ts
 import { Component } from '@angular/core';
+
 import { STChange, STColumn, STData } from '@delon/abc/st';
 
 @Component({
   selector: 'app-demo',
-  template: `<st
-    [data]="url"
-    [columns]="columns"
-    [req]="{ params: params }"
-    [res]="{ process: dataProcess }"
-    (change)="change($event)"
-  ></st>`,
+  template: ` <div class="mb-md">
+      <button nz-button (click)="st.checkAll(true)">All</button>
+      <button nz-button (click)="st.clearCheck()">Clean</button>
+    </div>
+    <st
+      #st
+      [data]="url"
+      [columns]="columns"
+      [req]="{ params: params }"
+      [res]="{ process: dataProcess }"
+      (change)="change($event)"
+    ></st>`
 })
 export class DemoComponent {
   url = `/users?total=100`;
@@ -35,14 +41,15 @@ export class DemoComponent {
     { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
     { title: '邮箱', index: 'email' },
     { title: '电话', index: 'phone' },
-    { title: '注册时间', type: 'date', index: 'registered' },
+    { title: '注册时间', type: 'date', index: 'registered' }
   ];
   change(e: STChange): void {
     console.log('change', e);
   }
   dataProcess(data: STData[]): STData[] {
     return data.map((i, index) => {
       i.disabled = index === 0;
+      if (index === 1) i.checked = true;
       return i;
     });
   }

diff --git a/packages/abc/st/demo/radio.md b/packages/abc/st/demo/radio.md
@@ -15,27 +15,33 @@ Use `change` event get selected data.
 
 ```ts
 import { Component } from '@angular/core';
+
 import { STChange, STColumn, STData } from '@delon/abc/st';
 
 @Component({
   selector: 'app-demo',
-  template: `<st
-    [data]="url"
-    [columns]="columns"
-    [req]="{ params: params }"
-    [res]="{ process: dataChange }"
-    (change)="change($event)"
-  ></st>`,
+  template: ` <div class="mb-md">
+      <button nz-button (click)="st.setRow(1, { checked: true })">Radio second</button>
+      <button nz-button (click)="st.clearRadio()">Clean</button>
+    </div>
+    <st
+      #st
+      [data]="url"
+      [columns]="columns"
+      [req]="{ params: params }"
+      [res]="{ process: dataChange }"
+      (change)="change($event)"
+    ></st>`
 })
 export class DemoComponent {
   url = `/users?total=300`;
   params = { a: 1, b: 2 };
   columns: STColumn[] = [
-    { title: '编号', index: 'id', type: 'radio' },
+    { title: '编号', index: 'id', type: 'radio', width: 70 },
     { title: '头像', type: 'img', width: 60, index: 'picture.thumbnail' },
     { title: '邮箱', index: 'email' },
     { title: '电话', index: 'phone' },
-    { title: '注册时间', type: 'date', index: 'registered' },
+    { title: '注册时间', type: 'date', index: 'registered' }
   ];
 
   change(ret: STChange): void {

diff --git a/packages/abc/st/st-td.component.ts b/packages/abc/st/st-td.component.ts
@@ -14,7 +14,7 @@ import { DrawerHelper, ModalHelper } from '@delon/theme';
 import { deepMergeKey } from '@delon/util/other';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { STComponent } from '.';
+import { STComponent } from './st.component';
 import { STColumnButton, STData } from './st.interfaces';
 import { _STColumn, _STTdNotify, _STTdNotifyType } from './st.types';
 
@@ -83,7 +83,7 @@ import { _STColumn, _STTdNotify, _STTdNotifyType } from './st.types';
           nz-radio
           [nzDisabled]="i.disabled"
           [ngModel]="i.checked"
-          (ngModelChange)="_radio($event)"
+          (ngModelChange)="_radio()"
         ></label>
         <a
           *ngSwitchCase="'link'"
@@ -171,9 +171,9 @@ export class STTdComponent {
     this.report('checkbox');
   }
 
-  _radio(checked: boolean): void {
+  _radio(): void {
     this.data.filter(w => !w.disabled).forEach(i => (i.checked = false));
-    this.i.checked = checked;
+    this.i.checked = true;
     this.report('radio');
   }
 

diff --git a/packages/abc/st/st.component.html b/packages/abc/st/st.component.html
@@ -17,7 +17,7 @@
     [nzDisabled]="_allCheckedDisabled"
     [(ngModel)]="_allChecked"
     [nzIndeterminate]="_indeterminate"
-    (ngModelChange)="_checkAll()"
+    (ngModelChange)="checkAll()"
     [class.ant-table-selection-select-all-custom]="custom"
   ></label>
 </ng-template>

diff --git a/packages/abc/st/st.component.ts b/packages/abc/st/st.component.ts
@@ -279,6 +279,11 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
     return this;
   }
 
+  private refreshData(): this {
+    this._data = [...this._data];
+    return this.cd();
+  }
+
   renderTotal(total: string, range: string[]): string {
     return this.totalTpl
       ? this.totalTpl.replace('{{total}}', total).replace('{{range[0]}}', range[0]).replace('{{range[1]}}', range[1])
@@ -562,7 +567,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
         })
       );
 
-    return this.cd();
+    return this.refreshData();
   }
 
   /**
@@ -588,8 +593,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
       this.resetColumns({ emitReload: options.emitReload });
       return this;
     }
-    this.cdr.detectChanges();
-    return this;
+    return this.refreshData();
   }
 
   // #endregion
@@ -647,7 +651,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   /** 清除所有 `checkbox` */
   clearCheck(): this {
-    return this._checkAll(false);
+    return this.checkAll(false);
   }
 
   private _refCheck(): this {
@@ -660,10 +664,10 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
     return this.cd();
   }
 
-  _checkAll(checked?: boolean): this {
+  checkAll(checked?: boolean): this {
     checked = typeof checked === 'undefined' ? this._allChecked : checked;
     this._data.filter(w => !w.disabled).forEach(i => (i.checked = checked));
-    return this._refCheck()._checkNotify();
+    return this._refCheck()._checkNotify().refreshData();
   }
 
   _rowSelection(row: STColumnSelection): this {
@@ -685,7 +689,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
   clearRadio(): this {
     this._data.filter(w => w.checked).forEach(item => (item.checked = false));
     this.changeEmit('radio', null);
-    return this;
+    return this.refreshData();
   }
 
   // #endregion
@@ -697,6 +701,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
         break;
       case 'radio':
         this.changeEmit('radio', ev.item);
+        this.refreshData();
         break;
     }
   }