[英]Why is a property on my Typescript-defined class showing up as undefined?
I have a property options
, that I define in my component class, but it's showing up as undefined when I run the code in the browser. 我有一个我在组件类中定义的属性
options
,但是当我在浏览器中运行代码时,它显示为未定义。 I can't find anything logically wrong with the code, but figure this may be some sort of bug or versioning issue. 我在代码上找不到任何逻辑上错误的地方,但是认为这可能是某种错误或版本控制问题。
Here is the component class: 这是组件类:
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; } }
Here is the error I'm getting in the browser: 这是我在浏览器中遇到的错误:
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)
What could possibly be going wrong here? 这里可能出什么问题了?
From looking at your code, I suspect you need to replace 通过查看您的代码,我怀疑您需要替换
options:
with 同
options =
You're never initializing option
to anything, you've got this: 您永远不会初始化任何
option
,您已经有了:
options: [
{
name: 'something'
},
{
name: 'something else'
}
];
but what I think you want is 但是我想你想要的是
options = [
{
name: 'something'
},
{
name: 'something else'
}
];
The second initializes the field, while the first one is just a type definition, (roughly equivalent to options: Array<{name: 'something' | 'something else'}>
) 第二个初始化该字段,而第一个只是一个类型定义((大致等同于
options: Array<{name: 'something' | 'something else'}>
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.