Questions Management – Frontend – Xây dựng phần xoá question

Xem toàn bộ series bài viết hướng dẫn xây dựng ứng dụng Questions Management tại đây.

Trong bài viết trước, chúng ta đã xây dựng phần hiển thị các câu hỏi với button delete tương ứng cho mỗi câu hỏi. Trong bài viết này, chúng ta sẽ hiện thực chức năng của button delete này các bạn nhé!

Đầu tiên, mình sẽ thêm vào class QuestionsService một phương thức cho phép chúng ta có thể gọi tới API xoá một question của API Question Service để truyền thông tin về question mà chúng ta cần xoá.

Cụ thể method này như sau:

Tiếp theo chúng ta cũng sẽ thêm mới một phương thức trong AllQuestionsComponent để thực hiện việc delete question như sau:

Như các bạn thấy, sau khi xác nhận lại việc xoá question, mình đã gọi tới method deleteQuestion() của QuestionsService mà chúng ta vừa mới thêm ở trên.

Cuối cùng, chúng ta sẽ sửa lại button delete question trong tập tin all_questions.component.html để gọi tới phương thức deleteQuestion() trong class AllQuestionsComponent khi người dùng click vào button này.

Từ:

thành:

OK, vậy là chúng ta đã thêm xong chức năng cho button delete rồi đó các bạn. Thử chạy xem sao nhé.

Trong trang All Questions, các bạn xoá một question bất kỳ bằng cách nhấn vào nút delete, sẽ thấy như sau:

Questions Management – Frontend – Xây dựng phần xoá question

Nhấn nút OK để xác nhận việc xoá question này.

Chia sẽ bài viết này ...Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment