将数据绑定到角2中的多个单选按钮

Question

我有评级明星的输入与单选按钮。我可以完美地添加这个等级，但是当我想在页面上显示它或者编辑它时，它只显示给我1(1开始是5的高亮显示)，即使评级是5。正如我所理解的，角绑定的等级只与1颗星绑定。我怎样才能把它和所有的星星恰当地结合在一起呢？

HTML：

 <div class="form-group">
        <label for="">Rating</label>
        <fieldset>
          <span class="star-cb-group">
            <input type="radio" id="rating-5" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/><label for="rating-5">5</label>
            <input type="radio" id="rating-4" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/><label for="rating-4">4</label>
            <input type="radio" id="rating-3" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/><label for="rating-3">3</label>
            <input type="radio" id="rating-2" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/><label for="rating-2">2</label>
            <input type="radio" id="rating-1" name="rating" [value]=book.rating [(ngModel)] = "book.rating" #r="ngModel"/><label for="rating-1">1</label>
          </span>
          <div class="alert alert-danger"
               *ngIf="r.invalid">
            Rating is required
          </div>
        </fieldset>

      </div>

​

​

当单击edit按钮将数据上载到数据库时，将调用下面的submit函数。

edit(book) {
    const id = this.activeRoute.snapshot.params['id'];
    const updbook = {
      _id: id,
      title: book.title,
      author: book.author,
      description: book.description,
      status: book.status,
      displayStatus: book.displayStatus,
      rating: book.rating
    };
    console.log(book);
    //
    this.bookService.editBook(updbook).subscribe(data => {
      if (data.success) {
        console.log('book edited');
        this.router.navigate(['/']);
      } else {
        console.log('error book edit');
      }
    });
  }

Answer 1

当为多个单选按钮name属性分配相同的名称时，它们将成为一个radio-button-group，并且只能将其中一个设置为“选中”。尝试用不同的名称绑定到它们的name属性。

我建议您使用checked属性设置单选按钮的状态，并使用click或change事件设置rating。

<input type="radio" [checked]="rating >= 1" (click)="rate(1)">
<input type="radio" [checked]="rating >= 2" (click)="rate(2)">
<input type="radio" [checked]="rating >= 3" (click)="rate(3)">
<input type="radio" [checked]="rating >= 4" (click)="rate(4)">
<input type="radio" [checked]="rating >= 5" (click)="rate(5)">

rate(val) {
  // here setTimeout or ChangeDetectorRef.markForCheck will let angular rerender the page according to changes of value
  setTimeout(() => {
    this.book.rating = val;
  });
}

柱塞演示