[Angular] 使用ngForTrackBy 來提升*ngFor的效能

-

 


詳細文章

https://dotblogs.com.tw/explooosion/2017/04/29/035512



用法

<li *ngFor="let item of items ; trackBy:trackByFn ; let i=index">{{i}} - {{ item.name }}</li>


trackByFn(index, item) { return index; // or item.name }







留言

張貼留言

這個網誌中的熱門文章

[Angular] 閒置登出作法

-
app.componemt.ts 偵測事件    //  如自動登出功能有bug 則停用以下--------    @ HostListener ( ' window:keyup ' ,  [])    @ HostListener ( ' window:click ' ,  [])    @ HostListener ( ' window:wheel ' ,  [])    @ HostListener ( ' window:mousemove ' ,  [])    resetTimer ()   {      this . authService . notifyUserAction () ;    } authService export   class   AuthService   {    isLoggedIn   =   false ;    //  ! 閒置登出時間請更改這參數的數字    endtimeSet   =   30 ;    //  這邊讓單位變成分鐘秒    endTime   =   this . endtimeSet   *   60 ;    //  store the URL so we can redirect after logging in    redirectUrl :   string ;    constructor ( private   router :   Router )   {}    //  偵...
閱讀完整內容

[Angular Materail] 檔案上傳範例

-
  範例 https://stackblitz.com/edit/angular-material-file-input-with-form-field?file=src%2Fapp%2Fapp.component.ts 來源 https://forum.angular.tw/t/topic/1972/5 html < mat-card >    < p   mat-card-title > Test file input with form field </ p >    < mat-divider ></ mat-divider >    < mat-card-content >      < br >< br >      < hello  [ name ] = "name" ></ hello >      < mat-form-field   style = "width: 100%;" >        < mat-label > File matInput </ mat-label >        < button   mat-icon-button   matPrefix  ( click ) = "f_input.click()" >          < mat-icon > attach_file </ mat-icon >        </ button >  ...
閱讀完整內容

[Angular Material] 搜尋式下拉選單範例

-
  範例 https://stackblitz.com/edit/filter-select 來源 https://forum.angular.tw/t/topic/1722/4 HTML < mat-card >    < p   mat-card-title > Angular Material Select With Filter </ p >    < mat-divider ></ mat-divider >    < mat-card-content >      < br >< br >      < mat-form-field   style = "width: 100%;" >        < mat-label > Pick a language </ mat-label >        < mat-select  [ formControl ] = "control" >          < mat-option   disabled >            < input   type = "text"   matInput  [ formControl ] = "filter"   placeholder = "Filter..." >          </ mat-option > ...
閱讀完整內容