Angular2绑定“名称" < input>中的属性带* ngFor的元素 [英] Angular2 binding of "name" attribute in <input> elements with *ngFor

问题描述

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

I am experimenting with Angular2 and Angular Material. I used *ngFor to let Angular generate the <input> elements for me. However, in the resulting webpage, the generated element does not have name attribute.

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

This is part of the code in order-form.component.html, which asks the user to input the number of different kinds of fruits:

<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浏览器中，当我右键单击苹果" <input>时，元素的name属性为空，但是ng-reflect-name是否正确设置为apples?如何解决这个问题? 此处没有name属性，但ng-reflect-name是apples

In the Chrome browser, when I right click the 'apples' <input>, the name attribute of the element is empty, but the ng-reflect-name is set to apples correctly? How to resolve this problem? No name attribute here, but ng-reflect-name is apples

推荐答案

最终答案

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

Use ([name]="fruit" or name="{{fruit}}") and ([attr.name]="fruit" or attr.name="{{fruit}}") together will work.

更新

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

If you want to use the string 'fruit' as value for the name attribute, use

name="fruit"

或

name="{{'fruit'}}"

或

[name]="'fruit'"

否则，您绑定组件字段fruit的值(您的组件似乎没有)

otherwise you bind the value of the components field fruit (which your component doesn't seem to have)

原始

默认情况下，Angular会进行属性绑定.如果要属性绑定，则需要明确显示

Angular does property binding by default. If you want attribute binding you need to make that explicit

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

或

 [name]="fruit"

另请参见

• Angular 2数据属性
• 如何在Angular 2中添加条件属性?
• 属性与属性有什么区别?

• Angular 2 data attributes
• How to add conditional attribute in Angular 2?
• What is the difference between attribute and property?

这篇关于Angular2绑定“名称" < input>中的属性带* ngFor的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！