如何设置Angular8中的输入值？

Question

我正在构建受 this site 启发的发票功能，我希望发票的前两行预填充：'Hours worked' 和 'Kilometers travelled'。上述站点的示例代码使用的是 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 代码，但现在不相关）

Answer 1

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

Your code

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

to this

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

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

如何设置Angular8中的输入值？

How do I set the input value in Angular 8?

forms

input

ngmodel

angular

angular8