Question

使用Angular设置输入元素的值时遇到了麻烦。

我正在尝试通过以下方法在应用程序中设置动态创建的输入元素的值：

copyPricingToAll(): void {
  var copyValue: string = document.getElementById("priceInputGlobal").value;

  this.currentItem.orderLines.forEach(orderLine => {
  document.getElementById("priceInput-" + orderLine.id).setAttribute("value", copyValue);
   });
  }

我正在创建像这样的行：

<ng-container *ngFor="let orderLine of currentItem.orderLines let i=index">
    <tr>
       <td>{{getCorrectTimeString(orderLine)}}</td>
       <td>{{orderLine.quantity}}</td>
       <td><input id="priceInput-{{orderLine.id}}" type="number" value="{{orderLine.price}}"></td>
    </tr>
</ng-container>

不幸的是，.value不被识别为有效操作。我不确定如何正确地设置angular中动态创建的元素的值。我希望有人能够帮助我解决这个问题。

Answer 1

您应该使用以下内容：

       <td><input id="priceInput-{{orderLine.id}}" type="number" [(ngModel)]="orderLine.price"></td>

您需要在FormsModule部分的app.module中将inputs添加到您的import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ ... ], imports: [ BrowserModule, FormsModule ], ..中，

ngModel

[]周围的括号的用法如下：

()表明它正在从您的TS文件中获取输入。此输入应该是一个公共成员变量。从TS绑定到HTML的一种方式。
[()]表明它正在将HTML文件中的输出输出到TS文件中的变量。从HTML绑定到TS的一种方法。
id="priceInput-{{orderLine.id}}"都是（例如双向绑定）

有关更多信息，请参见此处： https://angular.io/guide/template-syntax

我还建议将[id]="getElementId(orderLine)"替换为getElementId(orderLine)，其中priceInput1返回TS文件中的元素ID，并且可以在需要引用该元素的任何地方使用（避免简单的错误，例如在一个地方叫priceInput-1，在另一个地方叫for f in /home/testu/zz*; do sed -i "s/&VAR1\s*=\s*'?[1]{4}'?/EXAMPLE/g" "$f" done（如果您仍然需要通过其他地方的ID来访问输入）

Answer 2

您也可以使用reactive forms。这是一个示例：https://stackblitz.com/edit/angular-pqb2xx

模板

<form [formGroup]="mainForm" ng-submit="submitForm()">
  Global Price: <input type="number" formControlName="globalPrice">
  <button type="button" [disabled]="mainForm.get('globalPrice').value === null" (click)="applyPriceToAll()">Apply to all</button>
  <table border formArrayName="orderLines">
  <ng-container *ngFor="let orderLine of orderLines let i=index" [formGroupName]="i">
    <tr>
       <td>{{orderLine.time | date}}</td>
       <td>{{orderLine.quantity}}</td>
       <td><input formControlName="price" type="number"></td>
    </tr>
</ng-container>
  </table>
</form>

组件

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  mainForm: FormGroup;
  orderLines = [
    {price: 10, time: new Date(), quantity: 2},
    {price: 20, time: new Date(), quantity: 3},
    {price: 30, time: new Date(), quantity: 3},
    {price: 40, time: new Date(), quantity: 5}
    ]
  constructor() {
    this.mainForm = this.getForm();
  }

  getForm(): FormGroup {
    return new FormGroup({
      globalPrice: new FormControl(),
      orderLines: new FormArray(this.orderLines.map(this.getFormGroupForLine))
    })
  }

  getFormGroupForLine(orderLine: any): FormGroup {
    return new FormGroup({
      price: new FormControl(orderLine.price)
    })
  }

  applyPriceToAll() {
    const formLines = this.mainForm.get('orderLines') as FormArray;
    const globalPrice = this.mainForm.get('globalPrice').value;
    formLines.controls.forEach(control => control.get('price').setValue(globalPrice));
    // optionally recheck value and validity without emit event.
  }

  submitForm() {

  }
}

使用Angular 6设置输入字段的值

2 个答案: