Question

如何使用动态ID获取/更新元素的值？

<input type="text" class="form-control" id="{{'lat' + ind}}" formControlName="lat">

我无法使用ngAfterViewInit() {}，因为我需要在服务器响应后更新动态输入

this.someService.getData().subscribe(
                  (response) => {this.data = response.json()
                                 this.lon = this.data.x;
                                 this.lat = this.data.y;
                                 this.ind = this.data.ind;
                                // UPDATE MY 'lat+ind' and 'lon+ind' HERE
                  },
                  (error) => console.log('ERROR: ' + error)
          );

Answer 1

对于Angular可能有更好的解决方案，但您可以使用querySelector。

以下是一个例子：

const input = <HTMLInputElement>document.querySelector('#lat' + this.ind);

input.value = 'value'; // set value

修改

请阅读https://angular.io/guide/forms以了解表单如何与Angular一起使用。

Answer 2

this.someService.getData().subscribe(
    (response) => {
                     this.ngZone.run(function() {
                       this.data = response.json()
                       this.lon = this.data.x;
                       this.lat = this.data.y;
                       this.ind = this.data.ind;
                     };)
                  },
(error) => console.log('ERROR: ' + error)
);

注意：您必须导入NgZone并将其注入构造函数。

您需要执行此操作，因为在您收到服务回复后，您的视图未会更新。我上面的代码将恢复您的视图并将更新后的值发布到您的ID。

当你的lat和ind仍未定义时，你的模板会在开头发布。然后，当您拨打服务电话并收到回复时，您必须告诉angular使用新值更新您的视图。

注意：您也可以使用ChangeDetectorRef.detectChanges（）来执行此操作

Angular 2通过动态id获取元素

2 个答案: