“名称"的 Angular2 绑定<input>中的属性带有 *ngFor 的元素 [英] Angular2 binding of "name" attribute in <input> elements with *ngFor
问题描述
我正在试验 Angular2 和 Angular Material.我使用 *ngFor 让 Angular 为我生成 元素.但是，在生成的网页中，生成的元素没有 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 浏览器中，当我右键单击苹果" 时，元素的 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" or 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"
另见
这篇关于“名称"的 Angular2 绑定<input>中的属性带有 *ngFor 的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
