Angular2中使用*ngFor绑定<input>元素的"name"属性

Question

我正在尝试使用Angular2和Angular Material。我使用了*ngFor让Angular为我生成<input>元素。然而，在生成的网页中，生成的元素没有name属性。

这是order-form.component.html中的一部分代码，它要求用户输入不同种类水果的数量：

<md-list-item>
  <md-icon md-list-icon>shopping_cart</md-icon>
  <md-input-container *ngFor="let fruit of fruits" class="fruit-input">
    <input mdInput [(ngModel)]="order[fruit]" [placeholder]="capitalize(fruit)" 
           [id]="fruit" name="{{fruit}}" required value="0" #fruitInput 
           (input)="onInput(fruitInput)">
  </md-input-container>
</md-list-item>

这是相应的order-form.component.ts：

import { Component, OnInit } from "@angular/core";
import { Order } from "app/order";
import { PAYMENTS } from "app/payments";
import { OrderService } from "app/order.service";

@Component({
  selector: 'app-order-form',
  templateUrl: './order-form.component.html',
  styleUrls: ['./order-form.component.css']
})
export class OrderFormComponent implements OnInit {

  order = new Order();

  payments = PAYMENTS;

  fruits: string[] = [
    'apples',
    'oranges',
    'bananas'
  ];

  constructor(public service: OrderService) {
  }

  ngOnInit() {
  }

  get totalCost() {
    return this.service.getTotalCost(this.order);
  }

  onFocus(element: HTMLElement) {
    element.blur();
  }

  onSubmit() {
    console.log('onSubmit');
  }

  onInput(element: HTMLInputElement) {
    console.log(element);
    if (!this.service.isValidIntString(element.value)) {
      window.alert(`Please input a correct number for ${element.name}`);
      element.value = '0';
    }
  }

  capitalize(str: string): string {
    return this.service.capitalize(str);
  }

  get debug() {
    return JSON.stringify(this.order, null, 2);
  }
}

在Chrome浏览器中，当我右键点击“apples” <input> 元素时，该元素的 name 属性为空，但是 ng-reflect-name 属性正确地设置为 apples。如何解决这个问题？此处没有 name 属性，但 ng-reflect-name 为 apples

- Chiu King Yee CKY

---

你有收到任何错误信息吗？ - Aravind

@Aravind 从下面的控制台来看，没有任何错误。 - Chiu King Yee CKY

Answer 1

最终答案

同时使用 ([name]="fruit" 或 name="{{fruit}}") 和 ([attr.name]="fruit" 或 attr.name="{{fruit}}") 可以起作用。

更新

如果您想将字符串 'fruit' 用作 name 属性的值，请使用

name="fruit"

或者

name="{{'fruit'}}"

或者

[name]="'fruit'"

否则，您会绑定组件字段fruit的值（该组件似乎没有）。Angular默认进行属性绑定。如果您想要属性绑定，则需要明确指出。

 attr.name="{{fruit}}" (for strings only)

或者

 [name]="fruit"

另请参见

• Angular 2数据属性
• 如何在Angular 2中添加条件属性？
• 属性和特性的区别是什么？

- Günter Zöchbauer

---

ngModel 已经在工作了，没有问题。当我输入任何内容时，底部的 JSON 字符串将相应地更改。我想要做的是将 name 属性添加到 input 元素中。谢谢！ - Chiu King Yee CKY

抱歉，我想要的是对于“苹果”，name 是 apples，对于“橙子”，name 是 oranges，等等。如果我改变 name="fruit"，name 属性仍然不会显示。 - Chiu King Yee CKY

抱歉，我在 *ngFor 中漏掉了 fruit。不过，在这种情况下，我的原始答案是将属性 name 添加到 DOM 中。如果 ngModel 不起作用，您可能需要同时使用 attr.name="{{fruit}}" name="{{fruit}}"（但我觉得这很奇怪）。 - Günter Zöchbauer

谢谢！当我同时放置name={{fruit}}和attr.name={{fruit}}时，它就可以工作。但是为什么呢？ - Chiu King Yee CKY

attr.name="{{..}}" 没有传递到 @Input name。 - yurzui