diff --git a/packages/abc/st/demo/checkbox.md b/packages/abc/st/demo/checkbox.md index d4bfd0af5..1a4a43a3b 100644 --- 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: ``, + template: `
+ + +
+ ` }) export class DemoComponent { url = `/users?total=100`; @@ -35,7 +41,7 @@ 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); @@ -43,6 +49,7 @@ export class DemoComponent { 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 index ca2c08566..47e65a596 100644 --- 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: ``, + template: `
+ + +
+ ` }) 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 index 77e5f8ccf..4aadde1b2 100644 --- 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()" > !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 index 1e7c1a310..11dfbc79f 100644 --- 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" > diff --git a/packages/abc/st/st.component.ts b/packages/abc/st/st.component.ts index e9fc27a24..4c3b4f383 100644 --- 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; } }