ngFor：在 ng 中使用 2 个索引以错误的方式更改值

Question

我必须打印复选框。这工作正常，但我无法正确使用 ngfor 初始化它的 id 和名称。它给了我错误的价值

假设 2 个数组（或数据库中的 n 个数组）

动物 = 'dog', 'cat'

车辆='bus'、'plane'、'train'

所以如果我使用 2 ngFor 它应该像 (i, j is index)

i = 0 , j=0 > i = 0, j = 1

那么下一行应该是

i = 1, j = 0 > i = 1, j = 1 > i=1, j = 2

这是我的代码：

<form>
  <div class="form-group row" *ngFor="let firstColumn of mapMenusFirstColumn; index as i">
    <label class="col-4">{{firstColumn}}</label>
    <div class="col-8">
      <div class="custom-control custom-checkbox custom-control-inline" *ngFor="let secondColumn of this.getSecondColumn(this.mapMenu,firstColumn); index as j">
        <input name= {{i}}  id={{i+'_'+j}} type="checkbox" class="custom-control-input" value={{secondColumn}}>
        <label for={{i+'_'+j}} class="custom-control-label">{{secondColumn}}</label>
      </div>
    </div>
  </div>
</form>

所以 name 应该是 0 -> 当 id 0_0

name 应该是 0 -> 当 id 0_1

name 应该是 1 -> 当 id 1_0

name 应该是 1 -> 当 id 1_1

name 应该是 1 -> 当 id 1_2

[我没有显示实际数据，因为它太大了（n 行），只给出了屏幕截图]

当我同时使用 id 和 name 时，我 :

但是当我使用 i 作为名称（因为 3/4 的检查项目，复选框名称应该相同）和 j 作为 id 时：

好像我在j的位置。我可以向你保证：我试过将 i 反转为 j，但没用。

我也想了解不同的实现方式

Answer 1

在（盲目地）随机尝试之后，这奏效了

只有编辑是-

我必须使用 trackby
为了写一个字符串，我对 id 和 name

" "

[我不知道为什么会起作用，因为，它仍然是一个在插值下的字符串{{ }}。顺便说一句，非常感谢您的解释]

<form>
  <div class="form-group row" *ngFor="let firstColumn of mapMenusFirstColumn; index as i;">
    <label class="col-4">{{firstColumn}}</label>
    <div class="col-8">
      <div class="custom-control custom-checkbox custom-control-inline"
        *ngFor="let secondColumn of this.getSecondColumn(this.mapMenu,firstColumn); index as j;">
        <input name="checkbox{{i}}" id="checkbox{{i+'_'+j}}" type="checkbox" class="custom-control-input"
          value={{secondColumn}}>
        <label for="checkbox{{i+'_'+j}}" class="custom-control-label">{{secondColumn}}</label>
      </div>
    </div>
  </div>
</form>

在我的 .ts

  trackByFn(i: number) {
    return i;
  }

ngFor：在 ng 中使用 2 个索引以错误的方式更改值

ngFor : using 2 indexes in ng for changes the value in wrong way

javascript

typescript

ngfor

angular