角5：件名の.next（）が関数ではありません

Question

という名前の件名に.next（）を使用してという名前の新しい文字列をプッシュしようとしていますが、コンソールで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サービスで同じメソッドを使用していますが、このコンポーネントでは動作しません。角度の2/4で

Answer 1

は通常インポートがある：

import { Subject } from 'rxjs/Subject'; 

は、私が思うに、私はまた、あなたが入力パラメータ"setPeriod($event)"などのイベントに関数を呼び出しているアンギュラ5

に変更されていませんが、コード内の定義は文字列ですsetPeriod(period: string)

Answer 2

[(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

あなたは、このラジオ・グループへのすべての変更の対象に発光するようにしたい場合は、I

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>