已解決:帶有索引的 html ngfor

與索引一起使用 ngFor 指令的主要問題是,當迭代的數據發生變化時,它可能會導致意外結果。 這是因為在數組中添加或刪除項時索引不會自動更新,因此如果在索引 0 處添加新項,則所有其他項的索引都會向下移動一位。 這可能導致在您的視圖中顯示不正確的數據或在您的應用程序中出現意外行為。

<ul>
  <li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>

1. 這行代碼創建了一個無序列表。
2. *ngFor 指令用於循環遍歷items 數組並顯示列表中的每個項目。
3. let 關鍵字用於聲明一個名為“item”的變量,該變量保存循環迭代中的當前項。
4. let 關鍵字還用於聲明一個名為“i”的變量,該變量保存循環迭代中當前項的索引。
5. 此行顯示列表中的每個項目及其索引號(從 0 開始)。

什麼是角

Angular 是一個基於 JavaScript 的開源前端 Web 應用程序框架,主要由 Google 以及個人和公司社區維護,以解決開發單頁應用程序時遇到的許多挑戰。 JavaScript 組件補充了 Apache Cordova,這是一個用於開發跨平台移動應用程序的框架。 它旨在通過為客戶端模型-視​​圖-控制器 (MVC) 和模型-視圖-視圖模型 (MVVM) 架構提供框架以及富 Internet 應用程序中常用的組件來簡化此類應用程序的開發和測試。

ngFor元素

NgFor 是一個 Angular 結構指令,它允許我們循環遍歷數據並為數組或對像中的每個項目創建一個模板。 它用於將給定的 HTML 元素重複指定的次數。 NgFor 可用於顯示數組、對像或字符串中的數據。 它還可用於根據數組或對象的值生成 HTML 元素。 NgFor 通常與其他 Angular 指令結合使用,例如 ngIf 和 ngSwitch。

如何獲取 ngFor 元素的索引

您可以使用 index 關鍵字獲取 ngFor 循環中元素的索引。 其語法如下:

{{i}} – {{item}}

在此示例中,“i”變量將包含循環的當前索引。 然後您可以使用此變量訪問或修改列表中的元素。

相關文章:

發表評論