Questions Management – Frontend – Xây dựng phần hiển thị nội dung của một 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. Sau khi đã xây dựng xong phần hiển thị các câu hỏi, giờ là lúc chúng ta sẽ hiện thực chi tiết cho những phần còn thiếu trong trang này bao gồm: thêm mới một question, xem nội dung của một question, sửa và xoá một question. Điều đầu tiên mà mình sẽ làm là xây dựng trang hiển thị nội dung của một question các bạn nhé! Để hiển thị được thông tin của một question, chúng ta sẽ lấy thông tin của nó dựa vào id của chính nó nên đầu tiên, mình sẽ thêm mới một method trong class QuestionsService để thực hiện việc gọi API tìm question theo id của API Question Service như sau: Tiếp theo mình sẽ tạo mới một Component tên là QuestionComponent nằm trong thư mục src/app/questions/all_questions. Component này sẽ sử dụng phương thức findQuestionById() của class QuestionsService để tìm kiếm nội dung của question dựa vào id, được lấy từ đối tượng ActivatedRoute như sau: với tập tin question.component.html có nội dung như sau: Bây giờ chúng ta sẽ khai báo AllQuestionsComponent vào QuestionsModule: Và khai báo Routing cho nó: Bước cuối cùng chúng ta cần làm là sửa lại table hiển thị tất cả question trong tập tin all_questions.component.html, phần Actions, từ: thành: Đến đây thì chúng ta đã hoàn thành việc xây dựng phần hiển thị nội dung của một question. Bây giờ nếu các bạn chạy lại ứng dụng, đi đến trang “All Questions”: Questions Management – Frontend – Xây dựng phần hiển thị nội dung của một question Click vào biểu tượng đôi mắt trong bất kỳ dòng nào của bảng, các bạn sẽ thấy kết quả tương tự như sau: Questions Management – Frontend – Xây dựng phần hiển thị nội dung của một question
Chia sẽ bài viết này ...Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment