각도 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'; 

내가 생각하기에, 나는 또한 각도 5

당신이 입력 매개 변수로 이벤트와 함수를 호출에서 변경되지 않았습니다 "setPeriod($event)"하지만, 코드의 정의는 문자열입니다. setPeriod(period: string)

Answer 2

[(ngModel)]="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>