Angular-初始化并从DOM中获取价值

Question

在我的应用中，我有一个购物车组件，其中列出了所有物品。产品的链接将我带到该组件。

cart.component.html

<tbody class="table-body">
                    <tr *ngFor="let item of productsList">
                        <td>{{item['name']}}</td>
                        <td><input class="input is-primary" style="width: 30%;" type="number" value="{{item['qty']}}" id="quantity">
                            <button class="button is-small is-success is-light" style="margin-left: 20px;" (click)="updateQuantity(item['id'], item['price'], getValue())">Update</button>
                        </td>
                        <td>{{item['price']}} $</td>
                    </tr>
           </tbody>

cart.component.ts

constructor(private configService: ConfigService, private url: ActivatedRoute) { 
  this.url.queryParams.subscribe(params => {
    this.catId = params['catId'];
    this.productId = params['productId'];
    this.productPrice = params['productPrice'];
  });
}

  ngOnInit() {
    let item = {"id":this.productId, "price": this.productPrice, "qty": 1};
    this.configService.getCard(item).subscribe(
      (response) => {
        this.productsList = response;
        this.total = this.productsList.pop();
      }
    );
  }

  updateQuantity(productId, productPrice, productQuantity){
    let item = {"id":productId, "price": productPrice, "qty": productQuantity};
    this.configService.getCard(item).subscribe(
      (response) => {
        this.productsList = response;
        this.total = this.productsList.pop();
        console.log(this.productsList);
      }
    );
  }

  getValue(){
    let updateButton = document.getElementById("quantity");
    console.log(parseInt(updateButton.value));
    return parseInt(updateButton.value);
  }

在初始化中，我将数量加到一。但是，当用户更新数量时，应该考虑使用新值。

但是无论出于什么原因，即使我更新数量，它仍然保持为1。看来我的getElementById().value返回1而不是输入值。是因为我再次经历了ngOnInit()吗？