Question

我有一个小应用程序，在导航栏中，我想要一些过滤和数据排序选项。我的想法是使用单选按钮从选项中进行选择，例如，订购asc或desc：

<li class="nav-item active">
      <input type="radio" [checked]='ascOrDesc' (change)='ascOrDesc = !ascOrDesc' /> Asc.
    </li>
    <li class="nav-item active">
      <input type="radio" [checked]='!ascOrDesc' (change)='ascOrDesc = !ascOrDesc' /> Desc.
    </li>

有了它，当他们选择某个东西时，它取消选择另一个单选按钮，我可以在我的组件中根据ascOrDesc知道所选的内容。

现在，我需要在4种不同选项之间进行过滤，但我不能像之前的例子那样使用它。我尝试的是：

<div style="padding-right: 0.5rem;">
    <li class="nav-item active">
      <input type="radio" [checked]='esmeralda' (change)='esmeraldaChange()' /> Esmeralda
    </li>
    <li class="nav-item active">
      <input type="radio" [checked]='ttesub6'  /> Tte Sub 6
    </li>
  </div>
  <div>
    <li class="nav-item active">
      <input type="radio" [checked]='pilarReno'  /> Pilar Reno
    </li>
    <li class="nav-item active">
      <input type="radio" [checked]='todo'  /> Todo
    </li>

并且想法是当某些东西发生变化时（在这种情况下只有$ esmeralda $），它会调用一个函数，并且它会更改其他变量（ttesuu6，pilarReno和todo）的值并将它们设置为false，这样他们取消选中，如：

esmeraldaChange() {
  if (this.esmeralda) {
    this.ttesub6 = false;
    ...
  }
}

但是，这并没有触发其他单选按钮的更改。为什么呢？

多个单选按钮，只能选择1个 - Angular 5

0 个答案: