使用 *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 变量未在labelfor 属性或inputid 属性中使用。

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

Template expressions

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

&lt;input [id]="status"&gt;

这就是您对value 属性所做的(正确)。

模板表达式产生一个值。 Angular 执行表达式并将其分配给绑定目标的属性;目标可能是 HTML 元素、组件或指令。

Interpolation

您可以通过使用这样的双花括号来使用插值:

&lt;input id="status"&gt;

更一般地说,大括号之间的材料是一个模板表达式,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 版本,您需要像这样显式设置 labelfor 属性:

<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 创建一系列单选按钮的主要内容,如果未能解决你的问题,请参考以下文章

使用 *ngFor 并从中提交值的动态表单

Material - 将指令传递给子组件

屏幕太小时,Angular Material 步进器标题消失

Angular Material(组件)中的条件按钮颜色属性

如何使用 *ngFor 迭代对象键?

将 *ngFor 与迭代器一起使用的正确方法是啥?