Angular 角度4中的输入值未显示为硬编码值

我在发展中面临着未知的问题

在上图中，可以看到输入字段既有值也有硬编码值。问题是硬编码值应该反映在输入字段中，但所有输入值都有最后一个输入字段的值

export class AppComponent  {
  name = 'Angular 4';
    temlateInputs=[
      {"name":"Australia","bi":"33","ex":"0","br":"50","ot":"0","ab":"AU"},
      {"name":"Austria","bi":"55","ex":"0","br":"25","ot":"0","ab":"AV"},
      {"name":"Belgium","bi":"66","ex":"0","br":"25","ot":"0","ab":"BB"},
      {"name":"China","bi":"77","ex":"88.887","br":"30","ot":"0","ab":"CH"}];
}

桌子

<table>
<tr *ngFor="let data of temlateInputs">
  <td>{{data.name}}</td>
  <td>{{data.bi}}
  <input  type="text" class="form-control" name="bi" [(ngModel)]="data.bi"      />
  </td>
  <td>{{data.ex}}
  <input  type="text" class="form-control" name="ex"  [(ngModel)]="data.ex"      />
  </td>
  <td>{{data.br}}
  <input  type="text" class="form-control" name="br"  [(ngModel)]="data.br"    />
  </td>
  <td>{{data.ot}}
  <input  type="text" class="form-control" name="ot"  [(ngModel)]="data.ot"     />
  </td>
</tr>
</table>

{{data.name}
{{data.bi}
{{data.ex}
{{data.br}
{{data.ot}

奇怪的是，它在stackblitz中工作得很好

演示

---

为什么我会遇到这样的错误。

只有在输入名称相同的情况下才可能出现这种错误

用此代码块替换您的代码块，然后尝试：

<table>
<tr *ngFor="let data of temlateInputs;let i = index;">
    <td>
        {{data.name}}
        </td>
    <td>{{data.bi}}
        <input  type="text" class="form-control" name="bi{{i}}" [(ngModel)]="data.bi"      />
    </td>
    <td>{{data.ex}}
        <input  type="text" class="form-control" name="ex{{i}}"  [(ngModel)]="data.ex"      />
    </td>
    <td>{{data.br}}
        <input  type="text" class="form-control" name="br{{i}}"  [(ngModel)]="data.br"    />
    </td>
    <td>{{data.ot}}
        <input  type="text" class="form-control" name="ot{{i}}"  [(ngModel)]="data.ot"     />
    </td>
</tr>
</table>

{{data.name}
{{data.bi}
{{data.ex}
{{data.br}
{{data.ot}

@Patata，很高兴知道它对你有用，等待批准：），快乐编码：）。@VivekDoshi理想情况下，你不应该要求投票。回答得很好。@sabithpocker，OP给了我投票权，并在回答时删除了接受，这就是我问的原因。：）谢谢你的赏识