如何使用角度 5 中的异步更新输入更改数组？

Question

我想创建一个解决方案来在输入更改时更新可观察数组对象

我正在使用 ngFor 从一个数组创建一个表格，该表格具有一个带有投标值的文本字段。

我想要的是每当用户更新文本字段时，包含该出价值的对象应该自动更新

这是我的代码

模板文件：

<table class="table table-striped applist-table table-bordered">
  <thead>
    <tr>
      <th width="10%" class="text-center">App Id</th>
      <th width="40%">App/Site Name</th>
      <th width="30%">Exchange Name</th>
      <th width="20%">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let a of apps | async">
      <td width="15%" class="text-center">{{ a.sid }}</td>
      <td width="40%">{{ a.appName }}</td>
      <td width="30%">{{ a.exchange }}</td>
      <td width="15%">
        <div class="input-group">
          <input type="text" class="form-control" value="{{a.dynamic_bid}}" #bid />
          <div class="input-group-append">

          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

组件.ts

apps: Apps[] = [];
openBidUpdateOptions(content) {
  this.loading = true;

  this._campaignOperations.loadCampaignApplistData(this.id).subscribe(
    data => {
      if (data.status == 1200) {
        this.loading = false;
        this.apps = data.data;
        this.modalReference = this.modalService.open(content, {
          size: 'lg'
        });
        this.modalReference.result.then((result) => {

        }, (reason) => {

        });

        this.loading = false;
      } else {

        let str: any = '';
        let errorList = data.errors;
        for (let i in errorList) {
          str += errorList[i] + "<br>";
        }

        this.toastr.error(str, 'Error');
        this.loading = false;
        return false;
      }

    },
    error => {
      swal({
        position: 'center',
        type: 'error',
        title: 'Unable to create campaign due to unknown error',
        showConfirmButton: false,
        timer: 1500
      });
      this.loading = false;
      return false;
    });
}

export interface Apps {
  id ? : string;
  sid ? : string;
  appName ? : string;
  exchange ? : string;
  dynamic_bid ? : string;
}

这是相同的演示：https://stackblitz.com/edit/angular-kmjrqd

Answer 1

我不确定我是否理解您的问题。但我认为你可以使用 ngModel：

  <input type="text" class="form-control" [(ngModel)]="a.dynamic_bid" #bid />