Использование * ngFor для создания серии переключателей для angular2 с использованием рамки materialize-css

Question

Сезоны приветствуют всех!

Я следующий код, который создает единую радио-кнопки на основе платформы материализовать-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> 

Все кнопки , но может быть выбрана только первая кнопка (Single).

Как я могу заставить серию кнопок функционировать как радиокнопки, как ожидается?

Благодаря

Answer 1

Plunker

Почему это не работает

status переменной в вашем *ngFor цикле не используется в атрибуте вашего labelfor или атрибутом вашего inputid.

Есть два варианта, чтобы исправить это:

Template expressions

Вы можете использовать выражение шаблона, помещая атрибуты в квадратных скобках, как это:

<input [id]="status">

что то, что вы (правильно) с атрибутом value.

Выражение шаблона дает значение. Угловой выполняет выражение и присваивает его свойству объекта привязки; целью может быть элемент HTML, компонент или директива.

Interpolation

Вы можете использовать интерполяцию, используя двойные фигурные скобки, например:

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

В целом, материал между фигурными скобками является шаблоном выражения, Угловое первый оценивает и затем преобразует в строку.

В чем разница?

Оформить заказ this answer для объяснения различий между этими методами.

Полный Шаблон 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() { } 

} 

Update - Угловые 2 версии 2.2.0 <

Если вы используете Угловое 2 версии, которая меньше, чем 2,2 .0 вам необходимо явно установить атрибут labelfor следующим образом:

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

так как for не относится к объекту label элементов.

Почему?

С Angular 2.2.0 (634b3bb), Угловая карта атрибута for связанного объекта htmlFor.

Похоже, что многие разработчики интуитивно expected this, поэтому они добавили его.

Это было все довольно странно для меня, и this article от Pascal Precht действительно прояснил много вопросов.