angular10中的ngFor結構型指令使用

結構型指令是什麼

結構型指令是塑造或重塑 DOM 的結構，比如添加、移除或維護這些元素。在anugular中最常用的3個内置結構型指令NgIf，NgFor，NgSWitch。而今天我們要介紹的主角是ngFor指令的幾個常見使用。若大家想要了解更多的話，請登入官網檢視并操作了解其含義。https://angular.cn/guide/structural-directives#inside-ngfor

在angular中周遊數組時，需要用到ngFor指令來給數組的每一項執行個體化模闆。

第一種使用方式：根據索引index

<ul>
    <li *ngFor="let item of menus;let i=index">
      <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >
        {{item.title}}
      </a>
    </li>
  </ul>
           

第二種方式：作用于首個元素first和最後一個元素last

home.component.html檔案

<ul>
    <li *ngFor="let item of menus;let first=first; let last =last ">
      <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  [class.first]="first"  [class.last]="last">
        {{item.title}}
      </a>
    </li>
  </ul>
           

home.component.css檔案

.first{
    color: yellow;
  }
  .last{
    color: yellowgreen;
  }
           

第三種方式:奇偶數odd和even。

home.component.html檔案

<ul>
    <li *ngFor="let item of menus;let odd=odd; let even=even">
      <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  [class.odd]="odd" [class.even]="even"  >
        {{item.title}}
      </a>
    </li>
  </ul>
           

home.component.css檔案

.odd{
    color: green;
  }

  .even{
    color: red;
  }
           

第四種方式：trackBy性能提升，避免大量的DOM操作，添加或删除某項是，不至于發送重繪制。

trachBy性能提升了解可以看此篇，介紹比較詳細易懂：https://www.jb51.net/article/133784.htm

關于重繪及回流的了解可以檢視此篇:https://segmentfault.com/a/1190000017329980

<ul>
    <li *ngFor="let item of menus;let i=index;trackBy:trackByIndex">
      <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  [class.active]="i==selectedIndex"
      (click)="handleSelection(i)">
        {{item.title}}
      </a>
      <span class="indicator" *ngIf="i==selectedIndex"></span>
    </li>
  </ul>
           

export class ScrollableTabComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {}
    selectedIndex=-1;

  trackByIndex(index,item){
    console.log(index,item);
    return index
  }

  menus=[
    {title:'angular10'},
    {title:'react'},
    {title:'vue'},
    {title:'node'},
    {title:'webpack'},
    {title:'express'},
  ];
}