使用*ngFor使用materialize-css框架为angular2创建一系列单选按钮

Question

大家问候大家!

我有以下代码构建一个基于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>

创建所有按钮,但只能选择第一个按钮(单个).

我怎样才能获得按钮系列功能作为单选按钮的功能？

谢谢

Answer 1

Plunker

为什么它不起作用

循环中的status变量*ngFor未在for您label或您的id属性的属性中使用input.

有两种方法可以解决这个问题:

模板表达

您可以通过将属性放在方括号中来使用模板表达式,如下所示:

<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

如果您使用的Angular 2版本小于2.2.0,则需要显式设置如下label的for属性:

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

因为for不是label元素的属性.

为什么？

从Angular 2.2.0(634b3bb)开始,Angular将for属性映射到相关htmlFor属性.

听起来很多开发人员都直观地预料到了这一点,所以他们补充说.

起初这对我来说非常困惑,Pascal Precht的这篇文章确实清理了很多问题.