typescript - Angular 5: Subjectの.next()は関数ではありません

私は .next() を使って period と呼ばれる Subject に新しい文字列をプッシュしようとしていますが、コンソールには this.period.next は関数ではありません というエラーが表示されます。

option.component.ts

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
    selector: 'app-option',
    templateUrl: './option.component.html'
})
export class OptionComponent implements OnInit {
    public period: Subject<string> = new Subject<string>();

    constructor() {}

    ngOnInit() {}

    setPeriod(period: string) {
        this.period.next(period);
    }
}

option.component.html

<mat-radio-group [(ngModel)]="period" (ngModelChange)="setPeriod($event)">
    <span *ngFor="let option of httpHeader.option"><mat-radio-button [checked]="option.default" [value]="option.param" >{{ option.desc }}</mat-radio-button><br /></span>
</mat-radio-group>

私は rxjs 5.5.2 を使用しています。ユーザーがラジオボタンを選択すると、関数 setPeriod がトリガーされます。

私は何を間違えているのでしょうか？HTTPサービスでは同じ方法を使っていて、それはうまくいくのに、このコンポーネントではうまくいきません。

回答 #1

[(ngModel)]="period" は、あなたのコンポーネントの period プロパティに対する双方向バインディングです。これはラジオグループの値と等しくなるように period プロパティを更新しており、コンポーネント作成時に割り当てた Subject のインスタンスを上書きしていると思われます。そのため、setPeriod を呼び出したときに .next プロパティがもう存在しないのです。

テンプレート駆動フォームでの mat-radio-group の単純な使用例は次の通りです:

<mat-radio-group class="example-radio-group"
                 [(ngModel)]="favoriteSeason">
    <mat-radio-button class="example-radio-button" 
                      *ngFor="let season of seasons" [value]="season">
        {{season}}
    </mat-radio-button>
</mat-radio-group>
<div class="example-selected-value">
    Your favorite season is: {{favoriteSeason}}
</div>

...
export class RadioNgModelExample {
    favoriteSeason: string;

    seasons = [
        'Winter',
        'Spring',
        'Summer',
        'Autumn',
    ];
}

参照: https://material.angular.io/components/radio/examples

このラジオグループの変更ごとにサブジェクトを発行したい場合は、リアクティブフォームを使用することをお勧めします:

export class Example {
    radio: FormControl = new FormControl();
    period: Subject<string> = new Subject<string>();

    ...

    ngOnInit() {
        this.radio.valueChanges.subscribe(value => {
            this.period.next(value);
        });
    }
}

<mat-radio-group [formControl]="radio">
    <span *ngFor="let option of httpHeader.option">
        <mat-radio-button [checked]="option.default" 
                          [value]="option.param" >
            {{ option.desc }}
        </mat-radio-button>
        <br />
   </span>
</mat-radio-group>

回答 #2

Angular 2/4 では、通常インポートは次のようになります:

import { Subject } from 'rxjs/Subject';

私は思う、Angular 5では変わっていない

また、入力パラメータとしてイベントを使って関数を呼び出しています "setPeriod($event)" が、コード内での定義は文字列です setPeriod(period: string)