Angular2 ràng buộc thuộc tính "name" trong <input> các phần tử có * ngFor

Question

Tôi đang thử nghiệm với Angular2 và Vật liệu góc. Tôi đã sử dụng *ngFor để cho Angular tạo các phần tử <input> cho tôi. Tuy nhiên, trong trang web kết quả, phần tử được tạo không có thuộc tính name.

Đây là một phần của mã trong order-form.component.html, mà yêu cầu người dùng nhập số loại khác nhau của các loại trái cây:

<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> 

Đây là tương ứng 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); 
    } 
} 

Trong Chrome trình duyệt, khi tôi nhấp chuột phải vào 'quả táo' <input>, thuộc tính name của phần tử trống, nhưng ng-reflect-name được đặt thành apples chính xác? Làm thế nào để giải quyết vấn đề này? No name attribute here, but ng-reflect-name is apples

Answer 1

câu trả lời chính thức

sử dụng ([name]="fruit" hoặc name="{{fruit}}") và ([attr.name]="fruit" hoặc attr.name="{{fruit}}") cùng sẽ làm việc.

cập nhật

Nếu bạn muốn sử dụng chuỗi 'fruit' như giá trị cho các thuộc tính name, sử dụng

name="fruit" 

hoặc

name="{{'fruit'}}" 

hoặc [name] = "' quả ''

nếu không bạn ràng buộc giá trị của các thành phần lĩnh vực fruit (mà thành phần của bạn dường như không có)

gốc

góc không sở hữu ràng buộc theo mặc định. Nếu bạn muốn thuộc tính ràng buộc bạn cần phải chắc rằng rõ ràng

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

hoặc

[name]="fruit" 

Xem thêm

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