在嵌套 *ngFor 循环中访问索引

Posted 2023-02-22

【中文标题】在嵌套 *ngFor 循环中访问索引

【英文标题】：Accessing index in nested *ngFor loop

【发布时间】：2018-02-10 10:03:02

【问题描述】：

这对我的项目来说是一个非常特殊的问题，所以如果它是愚蠢的，那么请原谅我。

我正在 Angular 中构建一个动态表，其中每一行是一个单词，列是语言，每个单元格是该语言的相应翻译。

所以问题是我必须跟踪用户单击了哪个表格单元格，以便我可以创建或更新该单元格的值。

代码是这样的：

    <tbody>

    <tr *ngFor="let data of data">

    <td contenteditable='true' (keyup.enter)="saveEntry($event)"  
      >data.key</td>

    <td *ngFor="let column of tableColumns;let j = index" 
      contenteditable='true'            
     (keyup.enter)="onRowClick($event, column.languageID,             
       data?.value[0]?.dictionaryEntryID)"                         

     (click)="TranslationClick($event,data.value[k].dictionaryID)">


   <ng-container *ngFor="let dataValue of data.value ;let k = index">

   <span *ngIf="column.languageID==dataValue.languageID">

   dataValue.translation</span>
    </span>
    <span *ngIf="column.languageID!=dataValue.languageID">
    </span>
     </ng-container>
     </td>
     </tr>
    </tbody>

需要帮助：我需要在我的 ng-container 中获取 *ngFor 的索引 k TranslationClick 这样的方法：

 (click)="TranslationClick($event,data.value[k].dictionaryID)

我知道ng-container *ngFor 循环是在第一个循环之后创建的，但是有什么方法可以让我事先获得该单元格的索引 k。

或者还有其他更好的方法来跟踪表格的各个单元格吗？

【参考方案1】：

无法在定义模板的模板之外访问模板变量。

k只能在内部访问

   <ng-container *ngFor="let dataValue of data.value ;let k = index">

   <span *ngIf="column.languageID==dataValue.languageID">

   dataValue.translation</span>
    </span>
    <span *ngIf="column.languageID!=dataValue.languageID">
    </span>
   </ng-container>

【讨论】：

是否有任何其他方法可以访问该索引的值而不使用您在答案中提到的该索引？

@KIA 与 NgModel 和 NgModelOnChange

我不清楚你试图完成什么。上述代码之外的k（在我的回答中）是一组从 0 tp 到 data.value 长度的数字。你认为k 有什么价值？

@GünterZöchbauer k 将给我data.value 的索引，这将给我该索引处的对象，或者换句话说，表格特定单元格处的对象。

但是哪个k？ k 的具体值是在哪里执行 data.value[k].dictionaryID？