Angular 2通过动态ID获取元素

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

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() 来执行此操作

Answer 2

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

这是一个例子：

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

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

编辑

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