Estoy experimentando con Angular2 y Angular Material. *ngFor para permitir que Angular generara los elementos <input> por mí. Sin embargo, en la página web resultante, el elemento generado no tiene atributo de name .
Esto es parte del código en order-form.component.html , que le pide al usuario que ingrese la cantidad de diferentes tipos de frutas:
<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> Este es el order-form.component.ts correspondiente:
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); } } En el navegador Chrome, cuando hago clic con el botón derecho en 'manzanas' <input> , el atributo de name del elemento está vacío, pero ng-reflect-name está configurado correctamente en apples . ¿Cómo resolver este problema? No hay atributo de name aquí, pero ng-reflect-name es apples
respuesta final
Usar ( [name]="fruit" or name="{{fruit}}" ) y ( [attr.name]="fruit" or attr.name="{{fruit}}" ) juntos funcionarán.
actualizar
Si desea utilizar la cadena 'fruit' como valor para el atributo de name , utilice
name="fruit"o
name="{{'fruit'}}"o
[name]="'fruit'" de lo contrario, vincula el valor de la fruit de campo de los componentes (que su componente no parece tener)
original
Angular vincula la propiedad de forma predeterminada. Si desea vincular atributos, debe hacerlo explícito
attr.name="{{fruit}}" (for strings only)o
[name]="fruit"Ver también