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

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 未被识别为有效操作。我不确定如何正确设置角度动态创建的元素的值。我希望有人能够帮助我解决这个问题。

原文由 Mikey123 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该使用以下内容：

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

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

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

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

ngModel 周围括号的使用如下：

• [] 表明它正在从您的 TS 文件中获取输入。这个输入应该是一个公共成员变量。从 TS 到 HTML 的单向绑定。

• () 表明它将输出从您的 HTML 文件到 TS 文件中的变量。从 HTML 到 TS 的单向绑定。

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

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

我还建议将 id="priceInput-{{orderLine.id}}" 替换为 --- [id]="getElementId(orderLine)" 其中 getElementId(orderLine) 返回 TS 文件中的元素 ID，并且可以在需要引用元素的任何时候使用（为了避免简单的错误，比如在一个地方调用它 priceInput1 和在另一个地方调用 priceInput-1 。（如果您仍然需要通过它的 Id 在其他地方访问输入）

原文由 William Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议