角度 2 -- 访问单选按钮的值

Question

在app.component.ts中，我想打印出在app.component.html中单击的单选按钮的实际值。

app.component.html

<div class="container">
<div class="row">
    <div class="col-sm-3 well" style="width: 20%">
        <h4>Narrow Your Results</h4>
        <div class="well">
            <h5>Rating</h5>
            <form [formGroup]="ratingForm">
                <input type="radio" formControlName="rating" value=100
                    (click)="filterByRating(ratingForm.value)"> All Grills
            </form>
        </div>
    </div>
</div>

app.component.ts

@Component({
    selector: 'app-rootl',
    moduleId: module.id,
    templateUrl: app.component.html'
})
export class AppComponent implements OnInit {
    ratingForm = new FormGroup({
        rating: new FormControl(),
    });

    filterByRating(rating: number) {
        console.log("rating = " + rating.valueOf());
    }
}

在filterByRating()，我希望"rating=100"被打印出来。我反而得到"rating = [object Object]"

如何访问对象的值？

Answer 1

在(click)事件中，您正在呼叫filterByRating(ratingForm.value) .ratingForm变量是整个表单。您应该只传递单选按钮控件。像这样：

<input type="radio" formControlName="rating" value=100 (click)="filterByRating(ratingForm.controls['rating'].value)">