如何在角度 5 中使用 ng-switch 实现单选按钮？

Question

使用 angular5，我在互联网上找到了这段代码，我尝试在我的应用程序中运行它，因为我想要同样的东西，它没有按预期工作，问题是我可以检查所有单选按钮，也我甚至可以在选择任何单选按钮元素之前看到第一条消息。

<form>
      Pick a topic:
      <input type="radio" ng-model="myVar" value="dogs">Dogs
      <input type="radio" ng-model="myVar" value="tuts">Tutorials
      <input type="radio" ng-model="myVar" value="cars">Cars
    </form>

    <div ng-switch="myVar">
      <div ng-switch-when="dogs">
         <h1>Dogs</h1>
         <p>Welcome to a world of dogs.</p>
      </div>
      <div ng-switch-when="tuts">
         <h1>Tutorials</h1>
         <p>Learn from examples.</p>
      </div>
      <div ng-switch-when="cars">
         <h1>Cars</h1>
         <p>Read about cars.</p>
      </div>
    </div>

知道为什么这对我不起作用吗？我还没有导入任何库来处理这个例子。

这是用于此示例的 link 即时通讯，但它不适用于此链接中的我。

Answer 1

您可以使用 angular 执行以下操作

<input type="radio" value="dogs" name="comp" [(ngModel)]="radioValue"> A
<input type="radio" value="tuts" name="comp" [(ngModel)]="radioValue"> B
<input type="radio" value="cars" name="comp" [(ngModel)]="radioValue"> C

STACKBLITZ DEMO