javascript - 使用 ngChecked 将评级值绑定(bind)到 Angular 中的单选按钮

Question

我正在尝试将对象的值绑定(bind)到星星(单选按钮):

<form id="ratingsForm">
  <div class="stars">
    <input type="radio"  #rating="ngModel"
             [(ngModel)]="x.rating" [checked]="x.rating >= 1" name="star" class="star-1" id="star-1" />
    <label class="star-1" for="star-1">1</label>
    <input type="radio"  #rating="ngModel"
             [(ngModel)]="x.rating" [checked]="x.rating >= 2" name="star" class="star-2" id="star-2" />
    <label class="star-2" for="star-2">2</label>
    <input type="radio"  #rating="ngModel"
             [(ngModel)]="x.rating" [checked]="x.rating >= 3" name="star" class="star-3" id="star-3" />
    <label class="star-3" for="star-3">3</label>
    <input type="radio"  #rating="ngModel"
             [(ngModel)]="x.rating" [checked]="x.rating >= 4" name="star" class="star-4" id="star-4" />
    <label class="star-4" for="star-4">4</label>
    <input type="radio"  #rating="ngModel"
             [(ngModel)]="x.rating" [checked]="x.rating >= 5" name="star" class="star-5" id="star-5" />
    <label class="star-5" for="star-5">5</label>
    {{x.rating}}
    <span></span>
  </div>
</form>

----编辑: 我认为这应该可以正常工作，正如我在互联网上的各种示例中看到的那样，但它显示空白星星，这意味着没有绑定(bind)。

有什么解决方案可以让它发挥作用吗？

Answer 1

我认为 x. rating 是动态变化的。在任何情况下 ngChecked 只接受返回 true 和 false 的表达式。更好的方法是采用模型驱动(也称为响应式(Reactive)方法)。表面上看起来像一个普通的方法，但背后遵循的是 Observable 方法。后端发生的任何更改都会立即传播。浏览此博客以了解更多内容:

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

还有 对于您想要实现的解决方案，您可以引用以下示例:

http://embed.plnkr.co/mWhYtc2nf8hSHFbLWlEx/