为什么我的Typescript定义的类上的属性显示为未定义?

时间:2017-10-16 14:14:07

标签: javascript angular typescript

我有一个属性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)

这里可能出现什么问题?

2 个答案:

答案 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'}>