web-dev-qa-db-ja.com

materialize-cssフレームワークを使用してangular2の一連のラジオボタンを作成するための* ngForの使用

季節のご挨拶！

Materialize-cssフレームワークに基づいて単一のラジオボタンを作成する次のコードがあります http://materializecss.com/forms.html#radio

<input name = 'group1'
       type = 'radio'
       id = 'test2'/>
<label for = 'test2'>Yellow</label>

* ngForを使用する私の試みを以下に示します。

  statuses: string[] = [
    'Single',
    'Married',
    'Divorced',
    'Common-law',
    'Visiting'
  ];

  <p>{{maritalStatus?.status}}</p>
  <div *ngFor = 'let status of statuses;  let indx = index'>
    <input #widget
           class = 'with-gap'
           name = 'statusGroup'
           type = 'radio'
           id = 'status'
           [value] = 'status'
           [(ngModel)] = 'maritalStatus.status'
           (change) = 'radioBtnChange$.next(status)'
    />
    <label for = 'status'>{{status}}</label>
    <p>{{status}}{{ indx}}</p>
  </div>

すべてのボタンが作成されますが、選択できるのは最初のボタン（単一）だけです。

一連のボタンをラジオボタンの機能として使用するにはどうすればよいですか？

ありがとう

angularangular2-formsmaterializetypescript2.0
9
st_clair_clarke

プランカー

機能しない理由

*ngForループのstatus変数が、forのlabel属性またはidのinput属性で使用されていません。

これを修正する2つのオプションがあります。

テンプレート式

次のように属性を角括弧で囲んで、テンプレート式を使用できます。

<input [id]="status">

これは、value属性を使用して（正しく）実行したことです。

テンプレート式は値を生成します。 Angularは式を実行し、バインディングターゲットのプロパティに割り当てます。ターゲットはHTML要素、コンポーネント、またはディレクティブの場合があります。

補間

次のように二重中括弧を使用して、補間を使用できます。

<input id="{{status}}">

より一般的には、中括弧の間の素材は、Angularが最初に評価され、次に文字列に変換されるテンプレート式です。

違いは何ですか？

チェックアウト この答え これらの方法の違いについての説明。

フルテンプレートHTML

<h2>Current Status</h2>
<p>{{maritalStatus?.status}}</p>

<h2>Options</h2>
<div *ngFor="let status of statuses; let indx = index">
  <input #widget
   class='with-gap'
   name='statusGroup'
   type='radio'
   [id]='status'
   [value]='status'
   [(ngModel)]='maritalStatus.status'
  />
  <label [for]='status'>{{status}}</label>
</div>

完全なコンポーネント

import {Component} from '@angular/core';
import {Http} from '@angular/http'
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  maritalStatus = { status: 'Nothing selected' };
  statuses: string[] = [
    'Single',
    'Married',
    'Divorced',
    'Common-law',
    'Visiting'
  ];
  constructor() { }

}

更新-Angular 2バージョン<2.2.0

2.2.0未満のAngular 2バージョンを使用している場合は、次のようにlabelのfor属性を明示的に設定する必要があります。

<label [attr.for]='status'>{{status}}</label>

forはlabel要素のプロパティではないためです。

どうして？

Angular 2.2. （ 634b3bb ）なので、Angularはfor属性を関連するhtmlForプロパティにマップします。

多くの開発者は直感的に これを期待する のように思えるので、追加しました。

これは、最初はすべて私にとってかなり混乱しました。PascalPrechtによる この記事 は、多くの質問を明確にしました。

11
adriancarriger