iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
自我挑戰組

Angular 學習雜記系列 第 19

Angular 學習雜記-Angular整合應用網站-員工資料管理系統(八)

  • 分享至 

  • xImage
  •  

在上一個篇章,測試好單獨顯示出員工資料後,接下來,就是要如何在員工資料列表與員工銷售排行榜,按下任何一個員工,就連結到員工資料明細。

在employee-list.component.html中,修改有關員工的連結,主要是增加HTML標籤的Angular屬性routerLink來設定要連接到那個網頁,重點是在於連結的名稱後面,要帶物件類別的id。程式碼如下:

<h2>員工列表</h2>
<ul class="employees">
  <li *ngFor="let employeeinfo of employeelists">
    <a routerLink="/employeeinfo/{{employeeinfo.id}}">
      <span class="badge">{{employeeinfo.id}}</span> {{employeeinfo.name}}
    </a>
  </li>
</ul>

網頁執行結果:

https://ithelp.ithome.com.tw/upload/images/20191005/20000953IADCjYf74Q.png

基本上,在員工銷售排行榜的修改,也是類似的連結,大家可以先試試看,下回再進行解答,並且介紹後續的學習目標。


上一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(七)
下一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(九)
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言