1. 首頁 > 生活百科 > >

Angular + NG-ZORRO快速開發一個后臺系統( 三 )

小知識it知識

【Angular + NG-ZORRO快速開發一個后臺系統】我們先設定一個標志符 isAdd ， 默認是新建用戶；當 uuid 存在的時候 ， 將其設置為 false 值 ， 表示是編輯的狀態 ， 對內容進行表單的回填 。 提交表單的操作也是按照該標志符進行判斷 。 我們直接對 localStorage 的信息進行變更 ， 以保證同步列表信息 。
刪除功能
我們引入模態對話框進行詢問是否刪除 。
// user.component.ts// 刪除delete(data: any) { this.modal.confirm({ nzTitle: '<i>你想刪除該用戶?</i>', nzOnOk: () => { let users = JSON.parse(localStorage.getItem('users') || '[]'); let filterList = users.filter((item: any) => item.uuid !== data.uuid); localStorage.setItem('users', JSON.stringify(filterList)); this.list = filterList } });}

Angular + NG-ZORRO快速開發一個后臺系統

文章插圖

我們找到刪除的數據 ， 將其剔除 ， 重新緩存新的用戶數據 ， 并更新 table 的用戶列表數據 。
So ， 到此為止 ， 我們順利完成了一個簡單的項目 。 我們用 Gif 圖整體來看看 。
Angular + NG-ZORRO快速開發一個后臺系統

文章插圖

【完】
更多編程相關知識 ， 請訪問：編程入門??！
以上就是Angular + NG-ZORRO快速開發一個后臺系統的詳細內容 ， 更多請關注電腦自學網其它相關文章！

推薦閱讀