Angular2 привязка атрибута" name " в элементах с *ngFor

я экспериментирую с Angular2 и угловым материалом. Я использовал *ngFor чтобы угловой генерировать <input> элементы для меня. Однако на результирующей веб-странице сгенерированный элемент не имеет .

это часть кода 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, когда я щелкните правой кнопкой мыши "яблоки"!--3--> на name атрибут элемента пуст, но ng-reflect-name установлено значение apples правильно? Как решить эту проблему? нет , но ng-reflect-name is apples

1 ответов


окончательный ответ

использовать ([name]="fruit" или name="{{fruit}}") и ([attr.name]="fruit" или attr.name="{{fruit}}") вместе будут работать.

обновление

если вы хотите использовать строку 'fruit' в значение используйте

name="fruit"

или

name="{{'fruit'}}"

или

[name]="'fruit'"

в противном случае вы привязываете значение поля компонентов fruit (который ваш компонент не у)

оригинал

Angular делает привязку свойств по умолчанию. Если вы хотите привязку атрибутов, вам нужно сделать это явным

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

или

 [name]="fruit"

см. также