BehaviorSubject.value未定义，BehaviorSubject.next不是函数

问题描述

我在BehaviorSubjects上遇到问题。
在gallery.component.ts中，有3个BehaviorSubject，例如@Input，目前我正尝试使“品牌”工作，我使用setTimeout登录到ngOnInit（）中的控制台，它返回“ undefined”，但使用的是相同的html模板中的值给了我期望的值。
另外，当我尝试在“ checkboxChange（）”函数中提供“ this.brands.next（brands）”时，也会出现此错误：“ this.brands.next（）不是函数”。

我想问题出在@Input步骤中，因为在另一个不使用@Inputs的项目中，相同的代码可以正常工作。

您有什么建议吗？谢谢
stackblitz和github链接

gallery.component.ts

export class GalleryComponent implements OnInit{

    @Input() allCars:BehaviorSubject<Car[]>
    @Input() brands:BehaviorSubject<BrandCB[]>
    @Input() types:BehaviorSubject<TypeCB[]>

    filteredCars:BehaviorSubject<Car[]> = new BehaviorSubject<Car[]>(null)

    checkboxBrandAll:boolean = true
    checkboxTypeAll:boolean = true

    ngOnInit():void{
        this.filteredCars = this.allCars
        setTimeout(() => {
            console.log('onInit brands:',this.brands.value)
        },5000);
        
        //this.filterCars()
    }
 
    checkboxChange(event):void{
        
        let name = event.target.name;
        let checked = event.target.checked;
        
        console.log('brands',this.brands.value)

        //BRANDS
        let brands:BrandCB[] = this.brands.value;

        if(name =='allBrands'){
        
            brands.map(brand => brand.checked = false);

            this.brands.next(brands);

        } else if(name == 'otherBrands'){

            if(checked == true){

                this.checkboxBrandAll = false;

            } else {

                let isOneChecked:boolean = false;
                brands.map(brand => brand.checked ? isOneChecked = true : null)

                if(!isOneChecked)
                    this.checkboxBrandAll = true;

            }

            this.brands.next(brands);
        
        }

        // TYPES
        let types:TypeCB[] = this.types.value;

        if(name =='allTypes'){
    
            types.map(type => type.checked = false)
        
            this.types.next(types);

        } else if(name == 'otherTypes'){

            if(checked == true){

                this.checkboxTypeAll = false;

            } else {

                let isOneChecked:boolean = false;
                types.map (type => type.checked ? isOneChecked = true : null)

                if(!isOneChecked)
                this.checkboxTypeAll = true;

            }

            this.types.next(types);
        
        }

        this.filterCars();

    }
}

gallery.component.html

<div class="conteiner">

    <div class="left-conteiner">
        <div class="filter-box-brand">
            <div class="filterLabel"><b>Brand</b></div>
            <label>
                <input type="checkbox" id="allBrands" name="allBrands" value="all" 
                [(ngModel)]="checkboxBrandAll" (change)="checkboxChange($event)"> all
            </label>
            <div class="checkboxList" *ngFor="let brand of (brands | async)">
                <label>
                    <input type="checkbox" id="{{brand.name}}" name="otherBrands" value="{{brand.name}}"
                    [(ngModel)]="brand.checked" (change)="checkboxChange($event)"> {{brand.name}}
                </label>
                <label class="labelCount"> ({{brand.count}})</label>
            </div>
        </div>
        <br>
        <div class="filter-box-type">
            <div class="filterLabel"><b>Type</b></div>
            <label><input type="checkbox" id="allType" name="allTypes" value="all" [(ngModel)]="checkboxTypeAll" (change)="checkboxChange($event)"> all</label>
            <div class="checkboxList" *ngFor="let type of (types | async)">
                <label><input type="checkbox" [(ngModel)]="type.checked" id="{{type.name}}" name="otherTypes" value="{{type.name}}" (change)="checkboxChange($event)"> {{type.name}}</label><label class="labelCount"> ({{type.count}})</label>
            </div>
        </div>
    </div>
    
    <div class="central-conteiner">
        <div class="gallery" >
            <app-car-card-gallery *ngFor="let car of (filteredCars | async)" [car]="car"></app-car-card-gallery>
        </div>
    </div>

</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）