Угловая 7, привязка Enum и Input свойства - PullRequest
Новая
       36

Угловая 7, привязка Enum и Input свойства

0 голосов
/ 27 ноября 2018

Проблема заключается в том, что при связывании перечисления с шаблоном представления с использованием @Input перечисление разрешается до undefined.Компонент: 

enum FormAction {
  Insert,
  Update
}    
@Component({
  selector: 'app-member-editor',
})
export class MemberEditorComponent implements OnInit {
  modes = FormAction;

  @Input('mode') mode: FormAction;

  ngOnInit() {
    console.log(this.mode);
  }
}

Шаблон просмотра: 

<app-member-editor [mode]="modes.Insert"></app-member-editor>

Консоль: 

Cannot read property 'Insert' of undefined

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

вы пытаетесь отправить modes.Insert от родительского к дочернему компоненту в родительском html, и мы просто можем получить доступ к общему родительскому свойству в родительском html, а не к дочерним свойствам.поэтому вы должны сначала определить его в родительском компоненте, использовать его в html и отправить определенные данные из родительского в дочерний.

в родительском, а не в дочернем: 

public modes = FormAction;
0 голосов
/ 27 ноября 2018

Объявление типа свойства компонента равным FormAction не устанавливает значение свойства, но значение свойства равно undefined, просто вставьте свойство режима

AppComponent 

  modes = FormAction.Insert;

Шаблон 

 <app-member-editor [mode]="modes.Insert"></app-member-editor>

или вы можете использовать свойство get для доступа к перечислению FormAction

AppComponent 

  get modes() {
    return FormAction
  }

Template 

  <app-member-editor [mode]="modes.Insert"></app-member-editor>

свойство modes должно быть объявлено в AppComponent, а не в компоненте MemberEditor. В качестве моего примера в шаблоне appComponent у вас есть доступ ко всемсвойство AppComponent, как вы находитесь в области или контексте AppComponent так, как у вас нет доступа к свойству в компоненте MemberEditor

Но это возможно, если вы создаете переменную шаблона ( НЕ РЕКОМЕНДУЕТСЯ ) ?? 

<app-member-editor [mode]="mEditor.modes.Insert" #mEditor></app-member-editor>

демо

...