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

Question

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

angularangular2-formsmaterializetypescript2.0

9

大家好，祝大家节日快乐！

我有以下代码，基于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>

所有按钮已经创建，但只有第一个按钮（Single）可以被选择。

我该如何让一系列的按钮像单选按钮一样正常工作呢？

谢谢。

- st_clair_clarke

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adriancarriger · Accepted Answer

Plunker

为什么它不起作用

在你的*ngFor循环中，status变量没有被用作label的for属性或input的id属性。

有两个选项可以修复此问题：

模板表达式

您可以像这样将属性放入方括号中使用模板表达式：

<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.0（634b3bb）以来，Angular将for属性映射到相关的htmlFor属性。

听起来很多开发人员直觉上期望这样做，所以他们添加了它。

一开始我对此感到非常困惑，但Pascal Precht的这篇文章真正解决了我很多疑问。