我在使用Angular 设置输入元素的值时遇到了一些麻烦。
我尝试通过以下方法设置应用程序中动态创建的input元素的值:
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 元素的值。我希望有人能帮助我解决这个问题。
4条答案
按热度按时间myss37ts1#
您应该使用以下命令:
您需要将
FormsModule
添加到imports
部分中的app.module
,如下所示: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访问输入))。qxsslcnc2#
作为替代方法,您可以使用reactive forms。以下是一个示例:https://stackblitz.com/edit/angular-pqb2xx
模板
组件
monwx1rj3#
你可以用三种方法。它们是,
1)使用ngModel
2)使用表单控件名
3)使用元素引用
ylamdve64#
这是另一种方法。