首页 文章

获取ngFor项的索引和更新值

提问于
浏览 次
-1

我正在尝试更新Angular模板中输入字段的文本值 . 模板数据值在NgFor循环中生成，该循环从Web服务获取值 . 这是我的模板 .

<ul *ngFor="let item of vals?.bu">
  <li>
    <table>
          <tr>
            <td><button type="button" class="btn btn-info">{{item?.id}}</button></td>
            <td><input type="text" [(ngModel)]="item.bcluster"></td>
            <td><input type="text" [(ngModel)]="item.bsector"></td>
            <td><button type="button" id={{item?.id}} (click)="update($event)">Update</button></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="text" [(ngModel)]="item.bgroup"></td>
            <td><input type="text" [(ngModel)]="item.bunit"></td>
            <td><button type="button" id={{item?.id}} (click)="delete($event)">Delete</button></td>
          </tr>
      </table>

  </li>
</ul>

我现在需要从模板中获取字段的值，即'bcluster，bsector，bgroup，bunit'到我的TS文件中，以便调用更新API调用（通过更新按钮上的单击事件），但是当我尝试获取未定义的值，因为我没有得到确切的行索引 . 我不知道该怎么做 .

这是我的TS文件（只是试图让值得安慰）

update(event) {
    console.log(this.bcluster);
  }
angular ngfor

3 回答

  • 1

    你应该从模板中传递项目和索引

    <ul *ngFor="let item of vals?.bu; let i = index;">
  <li>
    <table>
          <tr>
            <td><button type="button" class="btn btn-info">{{item?.id}}</button></td>
            <td><input type="text" [(ngModel)]="item.bcluster"></td>
            <td><input type="text" [(ngModel)]="item.bsector"></td>
            <td><button type="button" id={{item?.id}} (click)="update(item,i)">Update</button></td>
          </tr>
      </table>

  </li>
</ul>

    比在ts

    update(item,idx) {
    //here idx will give you the index
    console.log(item.bcluster);
  }
    回复于
  • 1

    语法是

    *ngFor="let item of vals?.bu; let i = index;"

    您现在可以将 i 传递给您的函数 .

    回复于
  • 2

    更新ul以定义索引

    <ul *ngFor="let item of vals?.bu; let i = index">

    并使用i作为函数参数

    回复于

相关问题