typescript - Angular 5: ל-Subject אין פונקציה בשם .next()

אני מנסה לדחוף מחרוזת חדשה ל-Subject שנקרא period עם .next() אבל הקונסולה נותנת לי שגיאה this.period.next is not a function.

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 שאתה מגדיר כשנוצר הרכיב. לכן הוא כבר לא מכיל את המאפיין .next כשאתה קורא ל-setPeriod.

השימוש הפשוט של 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)