我有一个属性options
,我在我的组件类中定义,但是当我在浏览器中运行代码时,它显示为未定义。我在代码中找不到任何逻辑上的错误,但是这可能是某种错误或版本问题。
这是组件类:
import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-selector',
templateUrl: './selector.component.html',
styleUrls: ['./selector.component.css']
})
export class SelectorComponent implements OnInit {
myControl = new FormControl();
selectedOption: any;
filteredOptions: Observable<any[]>;
@Input() optionTitle: string;
options: [
{
name: 'something'
},
{
name: 'something else'
}
];
constructor() {
}
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(item => item && typeof item === 'object' ? item.name : item)
// this is where it's saying this.options is undefined.
// (if I do console.log(this.optionTitle), that shows up perfectly fine)
.map(name => name ? this.filter(name) : this.options.slice());
}
filter(input: string): any[] {
return this.options.filter(option =>
option.name.toLowerCase().indexOf(input.toLowerCase()) === 0);
}
displayFn(option: any): string | any {
return option ? option.name : option;
}
select($event): void {
this.selectedOption = $event.option.value;
}
}
以下是我在浏览器中收到的错误:
SelectorComponent.html:3 ERROR TypeError: Cannot read property 'slice' of undefined
at MapSubscriber.project (selector.component.ts:35)
at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:83)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at MergeAllSubscriber.webpackJsonp.../../../../rxjs/OuterSubscriber.js.OuterSubscriber.notifyNext (OuterSubscriber.js:19)
at InnerSubscriber.webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
at InnerSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at Object.subscribeToResult (subscribeToResult.js:17)
at MergeAllSubscriber.webpackJsonp.../../../../rxjs/operator/mergeAll.js.MergeAllSubscriber._next (mergeAll.js:85)
这里可能出现什么问题?
答案 0 :(得分:2)
从查看您的代码,我怀疑您需要替换
options:
与
options =
答案 1 :(得分:2)
你永远不会将option
初始化为任何东西,你有这个:
options: [
{
name: 'something'
},
{
name: 'something else'
}
];
但我认为你想要的是
options = [
{
name: 'something'
},
{
name: 'something else'
}
];
第二个初始化字段,而第一个只是一个类型定义,(大致相当于options: Array<{name: 'something' | 'something else'}>
)