如何在 Angular 8 中设置输入值？答案

【问题标题】：How do I set the input value in Angular 8?如何在 Angular 8 中设置输入值？
【发布时间】：2024-05-19 14:30:02
【问题描述】：

我正在构建一个受this site 启发的发票功能，我希望发票的前两行预先填写：“工作小时数”和“行驶公里数”。上述站点的示例代码使用的是Angularjs的第一个版本，所以我需要将其转换为Angular 2+，所以我将ng-model="items.description"更改为[(ngModel)]="items.description"

在我的 invoice.component.ts 我已经声明了这个字段：

  items:[
{ qty: 1, description: 'Hours worked', cost: 500 },
{ qty: 1, description: 'Kilometres traveled', cost: 4500 }

]; 这是完整的代码块：

<div class="row invoice-item" *ngFor="let item of items" ng-animate="'slide-down'">
    <div class="col-xs-1 remove-item-container">
      <a href ng-hide="printMode" ng-click="removeItem(item)" class="btn btn-danger">[X]</a>
    </div>
    <div class="col-xs-5 input-container">
      <input [(ngModel)]="items.description" placeholder="description" >
    </div>
    <div class="col-xs-2 input-container">
      <input ng-model="item.qty" value="1" size="4" ng-required ng-validate="integer" placeholder="Quantity" />
    </div>
    <div class="col-xs-2 input-container">
      <input ng-model="item.cost" value="0.00" ng-required ng-validate="number" size="6" placeholder="Cost" />
    </div>
    <div class="col-xs-2 text-right input-container">
      <!-- {{item.cost * item.qty | currency: currencySymbol}} -->
    </div>
  </div>

但是，这些行是空白的。我做错了什么？

（我知道其余代码仍在使用 Angularjs 代码，但现在不相关）

【问题讨论】：

您只为items 定义了一个类型，实际上并没有为其分配任何值。注意: 和= 之间的区别。
同样在 ngModel 指令中你应该引用item，而不是items。
'您只是为项目定义了一个类型，实际上并没有为它分配任何值。注意 : 和 =' 之间的区别，这可以解决问题

标签： angular forms input angular8 ngmodel

【解决方案1】：

正如上面提到的@Ingo Burk，您只需将代码中的"items" 调整为"item"

你的代码

      <input [(ngModel)]="items.description" placeholder="description" >
...

到这里

      <input [(ngModel)]="item.description" placeholder="description" >
...

说明：当你使用*ngFor="let item of items"时，“let item of items”表示让“item”包含所有数据“item”，因此您只需使用 “item”。 [(ngModel)] 用作 2 向数据绑定，这意味着用户可以同时输入并查看输出。我希望这能帮到您。欢迎大家指正

【讨论】：