在Angular2中使用@Input装饰器初始化属性的正确方法是什么？

Question

I've created a component in angular to handle my material autocomplete for selection an Action. I pass it the Action[] from the parent component. The autocomplete works appropriately but my display name function does not work. I get "TypeError: Cannot read property 'filter' of undefined" after a little digging I've discovered this is because inside my displayName function this.actions is an empty array. I feel like this.actions inside the displayName function is getting stuck with the initial value and not updating when the component loads the inputted value. I know my actions property is not empty because it works as expected with the autocomplete component. Is there a proper way to initialize my actions property so that it works with my displayName()?

import {Component, Input} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
import {Action} from '../../../../Interfaces/action';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

@Component({
  selector: 'app-input-action-typeahead',
  templateUrl: './input-action-typeahead.component.html',
  styleUrls: ['./input-action-typeahead.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: InputActionTypeaheadComponent,
    multi: true
  }]
})
export class InputActionTypeaheadComponent implements ControlValueAccessor {

  @Input() actions: Action[] = [];
  filteredActions: Observable<Action[]>;
  actionCtrl = new FormControl();

  constructor() {
    this.filteredActions = this.actionCtrl.valueChanges.pipe(
      startWith(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(action => action ? this._filter(action) : this.actions.slice())
    );
  }

  private _filter(value: string): Action[] {
    const filterValue = value.toLowerCase();
    return this.actions.filter(action => action.name.toLowerCase().indexOf(filterValue) !== -1);
  }

  registerOnChange(fn: any): void {
    this.actionCtrl.valueChanges.subscribe(fn);
  }

  registerOnTouched(fn: any): void {
  }

  writeValue(obj: Action): void {
  }

  displayName(id: number): string {
    if (!id) {
      return '';
    }
    return this.actions.filter(action => action.id === id)[0].name;
  }

  clear(): void {
    this.actionCtrl.setValue('');
  }

}

Answer 1

I suspect that you may be trying to access the actions variable value before it is set. There are a couple of ways you can handle this,

Approach 1

Check if actions has a value before trying to read it.

 displayName(id: number): string {
    if(!!id && !!this.actions){
        return this.actions.filter(action => action.id === id)[0].name;
    }

    return '';
  }

Approach 2

Every time change detection is run, your function displayName will be called. It adds a very minor performance overhead. To avoid that you can compute the displayName on the setter of the actions so it is not a function that gets called every time you move the mouse. This is more code, but more efficient.

_actions: [];
get actions(): []{
    return this._actions;
}
set actions(value: []) {
     this._actions= value;
     this.updateDisplayName();
}

updateDisplayName(actions: []): void{
        // use your actions variable here to compute the display name.
}