Question

我尝试使用.next（）将新字符串推送到名为 period 的主题，但控制台为我提供了一个 this.period.next不是函数< / em>错误。

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服务中使用相同的方法，但是在这个组件中它没有用。

Answer 1

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

如果你想在这个广播组的每次改变时发出主题，我建议你使用被动形式：

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>

Answer 2

在Angular 2/4中，导入通常是：

import { Subject } from 'rxjs/Subject';

我想，我在Angular 5中没有改变

此外，您使用事件作为输入参数"setPeriod($event)"调用该函数，但代码中的定义是字符串setPeriod(period: string)

Angular 5：Subject的#next（）不是函数

2 个答案: