Question

我正在尝试将对象的值绑定到星号（radiobuttons）：

<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>

----被修改：我认为这应该可以正常工作，就像我在互联网上的各种例子中看到的那样，但它显示空白星，这意味着没有约束力。

任何使其有效的解决方案？

Answer 1

我认为x.rating是动态变化的东西。在任何情况下，ngChecked只接受返回true和false的表达式。更好的方法是使用模型驱动，也称为反应方法。从表面上看，它看起来像一个正常的方法，但它背后遵循Observable方法。任何在后端发生变化的东西都会立即传播。浏览此博客以了解更多信息：

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

和要解决您要实现的目标，可以参考以下示例：

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

Answer 2

您不能在模板中声明与＃-notation同名的每个输入变量。使用这些表单时，您应该考虑使用angulars反应表单类，它们可以让您为表单创建模型，使您可以更轻松地从模板中绑定它。

https://angular.io/guide/reactive-forms

然后，您可以在HTML中使用它

<div formGroup=“rating”>
    <input type="radio" value=“1” formControlName=“star”>
    <input type="radio" value=“2” formControlName=“star”>
    <input type="radio" value=“3” formControlName=“star”>
    <input type="radio" value=“4” formControlName=“star”>
    <input type="radio" value=“5” formControlName=“star”>
</div>

并在TS中：

rating = new FormGroup({
   star: new FormControl(1)
})

Answer 3

一些细节使您的案例变得特别：

单选按钮不是互斥的;其中几个可以同时检查
不仅检查单选按钮是否与其值匹配，还检查等级是否更高
单击已选中的按钮可以更改评级，即使选中状态未更改

因此：

单选按钮不能共享相同的名称（您也可以使用复选框）
我不知道如何在这种情况下使用ngModel

您可以尝试在没有ngModel的情况下使其工作;绑定checked属性和click事件，如this stackblitz所示。

<div class="stars">
  <input type="radio" [checked]="x.rating >= 1" (click)="x.rating = 1" name="star1" ... />
  <input type="radio" [checked]="x.rating >= 2" (click)="x.rating = 2" name="star2" ... />
  <input type="radio" [checked]="x.rating >= 3" (click)="x.rating = 3" name="star3" ... />
  <input type="radio" [checked]="x.rating >= 4" (click)="x.rating = 4" name="star4" ... />
  <input type="radio" [checked]="x.rating >= 5" (click)="x.rating = 5" name="star5" ... />
  ...
</div>

使用ngChecked

3 个答案: