Question

我有以下代码，我想使用* ngFor with。该代码仅显示2个radiobutton，但还有更多。

class TickerTrader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    var MY_ACCESS_KEY = "REDACTED FOR PRIVACY REASONS";
    var MY_CHOSEN_CURRENCIES = "USD,JPY,CAD,RUB,CNY,GBP,EUR,BTC,CHF";

    const getQuotes = () => {
      $.get("https://apilayer.net/api/live?access_key=" + MY_ACCESS_KEY + "&currencies=" + MY_CHOSEN_CURRENCIES + "&format=1", (data) => {
        this.setState(data);
      });
    };

    // Fire once, immediately
    getQuotes();

    // Fire every 'n' milliseconds (5 seconds shown here, 1 hour is 3600000 ms)
    this._interval = window.setInterval(getQuotes, 5000);
  }

  componentWillUnmount() {
    this._interval && window.clearInterval(this._interval);
  }

  render() {
    const { error, quotes } = this.state;

    let list;

    if (error) {
      list = (
        <h3>{error.info}</h3>
      );
    }

    if (quotes) {
      list = (
        <ul>
          {
            Object
              .keys(quotes)
              .map(key => <li>{key}: {quotes[key]}</li>)
          }
        </ul>
      );
    }

    if (!list) {
      list = (
        <div>"Loading..."</div>
      );
    }

    return (
      <div>
        {new Date().toString()}
        {list}
      </div>
    )
  }
}

ReactDOM.render(
  <TickerTrader />,
  document.getElementById('container')
);

我没有编写单独的单选按钮，而是如何使用@ngFor，因此代码可以更简洁。

EDIT1 图书馆的语法如下：

  options: string[] = [
    'Single',
    'Married',
    'Divorced',
    'Common-law',
    'Visiting'
  ];

<input
    #single
    class = 'with-gap'
    name = 'group3'
    type = 'radio'
    id = 'single'
    value = 'Single'
    (change) = 'radioBtnChange$.next(single.value)'/>
<label for = 'single'>Single</label>

<input #married
       class = 'with-gap'
       name = 'group3'
       type = 'radio'
       id = 'married'
       value = 'Maried'
       (change) = 'radioBtnChange$.next(married.value)'/>
<label for = 'married'>Married</label>

它是http://materializecss.com/forms.html

的一部分

我尝试在标签中包装输入，但只显示标签。

感谢您的任何意见。

EDIT2

  <input class="with-gap" name="group3" type="radio" id="test5" checked />
  <label for="test5">Red</label>

Answer 1

问题是您使用option作为模板变量名称以及*ngFor当前迭代值。这就是*ngFor被#option元素的radio模板覆盖的原因。

您应该更改其中一个变量名称，假设*ngFor="let option of options"为*ngFor="let opt of options"

<强>标记

<label *ngFor="let opt of options"  for='option' >
  <input
      #option
      type="radio"
      class = 'with-gap'
      name='group3'
      id='option'
      [value]='option'
      (change) = 'changed(opt)'/>
</label>

Demo Here

Answer 2

如果你至少使用Angular2 rc2，我相信，这应该有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/450x350" alt="Slide 1">
      <div class="carousel-caption">
        Caption Slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 2">
      <div class="carousel-caption">
        Caption Slide 2
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 3">
      <div class="carousel-caption">
        Caption Slide 3
      </div>
    </div>        
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


        <footer class="footer">Blablabla
        </footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

注意＆＃34;而不是＆＃39;并且不要为=＆＃39;选项＆＃39;做到这一点。东西！

使用@ngFor模板生成单选按钮

2 个答案: