我在使用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中动态创建的元素的值。我希望有人能够帮助我解决这个问题。
您应该使用以下内容：
<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的一种绑定方式。
在()它的TS文件以输出HTML文件到一个变量表演。从HTML到TS的一种绑定方式。
在[()]都（如双向绑定）
请参阅此处以获取更多信息：https : //angular.io/guide/template-syntax
我还建议替换id="priceInput-{{orderLine.id}}"为类似这样的内容[id]="getElementId(orderLine)"，其中getElementId(orderLine)返回TS文件中的元素ID，并且可以在需要引用该元素的任何情况下使用（以避免priceInput1在一个地方或priceInput-1另一个地方调用之类的简单错误。（如果仍然需要通过其他地方的ID来访问输入）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句