使用Angular 6设置输入字段的值 [英] Setting values of input fields with Angular 6

问题描述

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

I've ran into some trouble setting the value of an input element using Angular.

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

I'm trying to set the value of dynamically created input elements in my application by this method:

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

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

我正在创建像这样的行:

I'm creating the rows like this:

<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中动态创建的元素的值.我希望有人能够帮助我解决这个问题.

Unfortunately .value is not recognized as a valid operation. I'm not sure how to correctly set the value of a dynamically created element in angular. I hope someone is able to help me out with this issue.

推荐答案

您应使用以下内容:

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

您将需要在inputs部分的app.module中添加FormsModule，如下所示:

You will need to add the FormsModule to your app.module in the inputs section as follows:

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  ..

ngModel周围的方括号的用法如下:

The use of the brackets around the ngModel are as follows:

• []表明它正在从您的TS文件中获取输入.此输入应该是一个公共成员变量.从TS绑定到HTML的一种方式.

• The [] show that it is taking an input from your TS file. This input should be a public member variable. A one way binding from TS to HTML.

()表明它正在将HTML文件中的输出输出到TS文件中的变量.从HTML绑定到TS的一种方法.

The () show that it is taking output from your HTML file to a variable in the TS file. A one way binding from HTML to TS.

[()]都是(例如双向绑定)

The [()] are both (e.g. a two way binding)

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

See here for more information: https://angular.io/guide/template-syntax

我还建议将id="priceInput-{{orderLine.id}}"替换为[id]="getElementId(orderLine)"，其中getElementId(orderLine)返回TS文件中的元素ID，并且可以在需要引用该元素的任何情况下使用(以避免调用诸如priceInput1在一个地方，而priceInput-1在另一个地方(如果您仍然需要通过其他地方的ID来访问输入内容)

I would also suggest replacing id="priceInput-{{orderLine.id}}" with something like this [id]="getElementId(orderLine)" where getElementId(orderLine) returns the element Id in the TS file and can be used anywere you need to reference the element (to avoid simple bugs like calling it priceInput1 in one place and priceInput-1 in another. (if you still need to access the input by it's Id somewhere else)

这篇关于使用Angular 6设置输入字段的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！