如何在 Angular5 中使用 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>

知道为什么这对我不起作用吗？ 我没有导入任何库来使用此示例。

这是我用于此示例的链接，但它对我不起作用，就像在这个链接中一样。

Answer 1

您可以使用角度执行以下操作

<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

堆栈闪电战演示