テンプレートからのデータをコンポーネントに戻す

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> 

目的は、1つ以上のセーリングのプロファイルを選択して、1つ以上のカウンタを選択し、選択した各カウンタの値を追加することです：私は、次のテンプレートを持っています。このテンプレートを使用するコンポーネントは次のとおりです。

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（）メソッドでは、それらの値と選択されたセーリングのプロファイルとカウンターを得るのですか？それは、フォーム、あなたはform.valueとして、あなたのデータを取得できることを確認し

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

Answer 1

利用[(ngModel)]の代わりに、あなたはonClick内this.counterかthis.sailingProfilesにアクセスするとき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> 

のようになります、選択したチェックボックスごとにcheckBoxState : trueが表示されます。それは次のようになります

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

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

これで、選択したオブジェクトの値を取得できます。

Answer 2

：望ましい結果はこのようになります文字列です。ベスト@angular/formsバンドルを使用して、ブートストラップには、実行します。

disableDeprecatedForms(), 
provideForms(), 

は、現在のフォームのAPIを取得します。これは角2つのフォーム上の良い最新のチュートリアルです：http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/