使用 *ngFor 使用 materialize-css 框架为 angular2 创建一系列单选按钮
Posted
技术标签:
【中文标题】使用 *ngFor 使用 materialize-css 框架为 angular2 创建一系列单选按钮【英文标题】:Using *ngFor for create a series of radio buttons for angular2 using materialize-css framework 【发布时间】:2017-05-10 03:42:33 【问题描述】:季节问候大家!
我有以下代码,它基于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)。
我怎样才能让一系列按钮像单选按钮一样发挥作用?
谢谢
【问题讨论】:
【参考方案1】:Plunker
为什么它不起作用
*ngFor
循环中的status
变量未在label
的for
属性或input
的id
属性中使用。
有两种方法可以解决这个问题:
Template expressions
您可以通过将属性放在方括号中来使用模板表达式,如下所示:
<input [id]="status">
这就是您对value
属性所做的(正确)。
模板表达式产生一个值。 Angular 执行表达式并将其分配给绑定目标的属性;目标可能是 HTML 元素、组件或指令。
Interpolation
您可以通过使用这样的双花括号来使用插值:
<input id="status">
更一般地说,大括号之间的材料是一个模板表达式,Angular 首先计算然后转换为字符串。
有什么区别?
查看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()
更新 - Angular 2 版本
如果您使用低于 2.2.0 的 Angular 2 版本,您需要像这样显式设置 label
的 for
属性:
<label [attr.for]='status'>status</label>
因为for
不是label
元素的属性。
为什么?
由于Angular 2.2.0 (634b3bb),Angular 将for
属性映射到相关的htmlFor
属性。
听起来很多开发者直觉expected this,所以就加了。
起初这让我很困惑,Pascal Precht 的 this article 确实解决了很多问题。
【讨论】:
太好了,谢谢。我必须进行两个小调整才能使其运行 - 输入上的 id 和标签上的 for 都是属性,而不是属性。因此,我必须在两者前面加上 attr 才能使其工作。请参阅上面的 EDIT1 了解对我有用的方法。谢谢 实际上,只需要进行一次调整 - label 因为 id 既是属性又是属性。 我刚刚发现只有在您使用低于 2.2.0 的 Angular 2 版本时才需要它。起初我很困惑,结果他们将其添加为最近的功能。感谢您指出这一点,因为它让我们对框架进行了一些有趣的学习!以上是关于使用 *ngFor 使用 materialize-css 框架为 angular2 创建一系列单选按钮的主要内容,如果未能解决你的问题,请参考以下文章
屏幕太小时,Angular Material 步进器标题消失