<input> 元素中的“name”属性与 *ngFor 的 Angular2 绑定
Posted
技术标签:
【中文标题】<input> 元素中的“name”属性与 *ngFor 的 Angular2 绑定【英文标题】:Angular2 binding of "name" attribute in <input> elements with *ngFor 【发布时间】:2017-08-10 05:49:31 【问题描述】:我正在试验 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
正确吗?如何解决这个问题?
No name
attribute here, but ng-reflect-name
is apples
【问题讨论】:
您是否遇到任何错误? @Aravind 从下面的控制台,没有错误。 【参考方案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 data attributes How to add conditional attribute in Angular 2? What is the difference between attribute and property?【讨论】:
当我使用attr.name="fruit"
时,浏览器会给我错误:如果在表单标签中使用了 ngModel,则必须设置名称属性或必须在 ngModelOptions 中将表单控件定义为“独立” .当我使用[name]="fruit"
时,结果根本没有变化。
那么问题出在别的地方。所以你实际上并不关心name
属性被添加到<input>
,你只是想让ngModel
工作?
我想你其实想要name="fruit"
ngModel
正在工作。没有任何问题。当我输入任何东西时,底部的 json 字符串会相应地改变。我想要的是将name
属性添加到input
元素中。谢谢!
对不起,我想要的是'apples',name
是apples
,对于oranges
,名称是oranges
,等等。如果我更改name="fruit"
,则name
属性仍未显示。以上是关于<input> 元素中的“name”属性与 *ngFor 的 Angular2 绑定的主要内容,如果未能解决你的问题,请参考以下文章