iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
SideProject30

Electron Angular軟體架構與簡易功能實作學習路程實記系列 第 24

Day 24- 功能開發-9-文章列表編輯與刪除功能

  • 分享至 

  • xImage
  •  

文章列表編輯功能

editArticle(article: any) {
    void this.router.navigate(['/article', article.IdArticle]);
  }
editSave() {
		//前一日以實作
    //如果是編輯狀態
    if (this.isEdit) {
      article.IdArticle = this.articleId;
    }

    article.Title = this.title;
    article.PlayedTime = this.PlayedTime;
    article.ArticleType = this.ArticleType;
    article.Position = this.Position;
    article.Description = this.Description;

    if (this.user !== undefined && this.user !== null) {
      const userArticle : UserArticle = {} as UserArticle;
      userArticle.article = article;
      userArticle.idUser = this.user.IdUser;
      this.articleListService.saveUserArticle(userArticle).
        subscribe((data: any) => {
          console.log(data);
          void this.router.navigate(['/articleList']);
      });
    }
  }

文章列表刪除

this.articleListService.deleteArticle(article.IdArticle).subscribe((data: any) => {
      this.getArticleList();
    }, (error: any) => {
      console.error(error);
    });

取得文件列表修訂

async findUserArticles(IdUser: string) {
    const userRepository = this.dataSource.getRepository(User);
    return await userRepository.find(
      {
        where: {
          IdUser: IdUser
        },
        relations: {
          Articles: true
        },
        order: {
          Articles: {
            IdArticle: "DESC"
          }
        }
      });
  }

功能結果顯示

  • 文章資料顯示

https://ithelp.ithome.com.tw/upload/images/20231008/20124238FRooe1cogQ.png

  • 文章編輯
    https://ithelp.ithome.com.tw/upload/images/20231008/20124238L4jplJsOtq.png

上一篇
Day 23 - 功能開發-8-使用者文章輸入驗證與儲存
下一篇
Day 25- 功能開發-10-使用者資料編輯
系列文
Electron Angular軟體架構與簡易功能實作學習路程實記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言