web-dev-qa-db-ja.com

* ngForを使用した<input>要素の「name」属性のAngular2バインディング

Angular2とAngular Materialを試しています。 *ngForを使用して、Angularに<input>要素を生成させました。ただし、結果のWebページでは、生成された要素に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正しく？この問題を解決するには？ ここにはname属性はありませんが、ng-reflect-nameはapples です

angularinputangular-material2ngfor
15
Chiu King Yee CKY

最終回答

（[name]="fruit"またはname="{{fruit}}"）と（[attr.name]="fruit"またはattr.name="{{fruit}}"）を一緒に使用すると動作します。

update

name属性の値として文字列'fruit'を使用する場合は、次を使用します。

name="fruit"

または

name="{{'fruit'}}"

または

[name]="'fruit'"

それ以外の場合は、コンポーネントフィールドfruit（コンポーネントにはないようです）の値をバインドします

オリジナル

Angularはデフォルトでプロパティバインディングを行います。属性バインディングが必要な場合は、明示的にする必要があります

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

または

 [name]="fruit"

こちらもご覧ください

24
Günter Zöchbauer