从模板获取数据返回到组件

Question

我是一个angular2新手，我有一个关于从模板中获取数据的问题。我有以下的模板：

<h2>Set parameters</h2> 
<button (click)="onClick()">Calculate</button> 
<h3>Sailing profiles</h3> 
<label *ngFor="let sailingProfile of sailingProfiles"> 
    <input type="checkbox" name="{{sailingProfile.title}}" value="{{sailingProfile.title}}"> 
    {{sailingProfile.title}}<br> 
</label> 
<h3>Counters</h3> 
<label *ngFor="let counter of counters"> 
    <input type="checkbox" name="{{counter.type}}" value="{{counter.type}}"> 
    <input type="text"> {{counter.type}}<br> 
</label> 

的目的是选择一个或多个帆船轮廓，并选择一个或多个计数器，并提供每个选定的计数器添加值。使用这个模板的组成部分是：

import {Component, EventEmitter, Output} from "@angular/core"; 
import {CounterService} from "../service/counter.service"; 
import {SailingProfileService} from "../service/sailing-profile.service"; 
import {CounterModel} from "../model/counter"; 
import {SailingProfileModel} from "../model/sailing-profile"; 

@Component({ 
    selector: 'params', 
    templateUrl: '../../template/params.html', 
    providers: [CounterService, SailingProfileService], 
}) 
export class ParamsComponent { 
    @Output() paramsUpdated: EventEmitter<string> = new EventEmitter<string>(); 

    counters: CounterModel[] = []; 
    sailingProfiles: SailingProfileModel[] = []; 

    constructor(private counterService: CounterService, private sailingProfileService: SailingProfileService) { 
    } 

    ngOnInit() { 
     this.counterService.getCounters().subscribe(c => this.counters = c); 
     this.sailingProfileService.getSailingProfiles().subscribe(s => this.sailingProfiles = s); 
    } 

    onClick() { 
     this.paramsUpdated.emit('test'); 
    } 
} 

我如何选择帆船轮廓和计数器以及它们的值回在onclick（）方法？期望的结果是一个字符串，它看起来像这样：

{"counters":[{"type":"Running hours","value":6000},{"type":"Seconds","value":31536000}],"sailing_profiles":[{"title": "Continuous sailing"}]} 

Answer 1

使用[(ngModel)]而不是value

它会是这个样子

<label *ngFor="let sailingProfile of sailingProfiles"> 
    <input type="checkbox" name="{{sailingProfile.title}}" [(ngModel)]='sailingProfile.checkBoxState'> 
    {{sailingProfile.title}}<br> 
</label> 
<h3>Counters</h3> 
<label *ngFor="let counter of counters"> 
    <input type="checkbox" name="{{counter.type}}" [(ngModel)]='counter.checkBoxState'> 
    <input type="text"> {{counter.type}}<br> 
</label> 

现在，当您访问this.counter或this.sailingProfiles内onClick，您会看到每个选中的复选框都有checkBoxState : true。它应该看起来像

this.counters = [ 
    {"type":"Running hours","value":6000}, 
    {"type":"Seconds","value":31536000, checkBoxState: true} 
]; 

this.sailingProfiles = [ 
    {"title": "Continuous sailing", checkBoxState: true} 
] 

现在您可以获取所选对象的值。

Answer 2

使它成为一个形式，那么你就可以得到你的数据form.value。最好使用@angular/forms包并在你的引导程序中执行：

disableDeprecatedForms(), 
provideForms(), 

获取当前表单API。这是一个很好的最新教程角2种形式：http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/