Angular 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变量是整个表单。你应该只传递radiobutton控件。像这样：

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