Javascript 如何在angular 5中使用async在输入更改时更新数组？

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

我正在使用ngFor from angular从一个数组创建一个表，该数组有一个带有bid值的文本字段

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

这是我的密码

模板文件：

<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>

应用程序Id
应用程序/网站名称
交换名称
行动
{{a.sid}}
{{a.appName}}
{{a.exchange}}

组件技术

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;
}

apps:apps[]=[]；
openBidUpdateOptions（内容）{
这是。加载=真；
此.\u campaignOperations.loadCampaignApplistData（this.id）.subscribe(
数据=>{
如果（data.status==1200）{
这一点：加载=错误；
this.apps=data.data；
this.modalReference=this.modalService.open（内容、{
尺寸：“lg”
});
this.modalReference.result.then（（result）=>{
}，（原因）=>{
});
这一点：加载=错误；
}否则{
让str:any=''；
让errorList=data.errors；
for（让我进入错误列表）{
str+=errorList[i]+“
”；
}
this.toastr.error（str，'error'）；
这一点：加载=错误；
返回false；
}
},
错误=>{
游泳({
位置：'中间'，
键入：“错误”，
标题：“由于未知错误，无法创建活动”，
showconfixton:false，
计时器：1500
});
这一点：加载=错误；
返回false；
});
}
导出接口应用程序{
id？：字符串；
sid？：字符串；
appName？：字符串；
交换？：字符串；
动态投标？：字符串；
}

---

这是同样的演示：

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

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

不，这不起作用，在这里我将有多行，每个行的文本字段由出价组成。我不想写任何点击输入更改事件。每当输入值更新时，我希望在同一数组上更新该特定属性。我也可以通过其他方式来实现这一点，但我不想让这个答案变得更复杂。您有双向数据绑定，您的阵列将被更新？请检查此项，谢谢，抱歉，我不知道解决方案您的意思是您想从后端获取值并进行更新？不，我已经从后端检索了数组，我想在输入更改时更新特定对象您能更新stackblitz中的示例吗？这样问题就更清楚了，每当文本框更新时，我希望数组中的对象都应该更新，因为@bluray建议将其设置为[（ngModel）]，这是一个强大的解决方案，将使您的任务变得非常有效