Как использовать Enum в угловых 2 шаблонах -- angular пол Связанный проблема

How to use enum in Angular 2 templates


42
vote

проблема

русский

Я пытаюсь использовать Enum в шаблонах Angularjs 2. Ниже мой код

 <код> @Component({     selector: 'test',     template: ` <ul class="nav navbar-nav">     <li class="{{activeSection == SectionType.Primary ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li>     <li class="{{activeSection == SectionType.Aditional ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Aditional)">Additional Details</a></li>     <li class="{{activeSection == SectionType.Payment ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Payment)">Payment Settings </a></li>              </ul>`   })   export class TestComponent{   activeSection: SectionType = SectionType.Primary;    setActiveSection(section: SectionType) {         this.activeSection = section;     } }   

Вот мой enum:

 <код> enum SectionType {     Primary,     Aditional,     Payment }   

Это бросание исключения: TypeError: не удается прочитать свойство «Первичный» undefined

Английский оригинал

I am trying to use enum in angularjs 2 templates. Below is my code

@Component({     selector: 'test',     template: ` <ul class="nav navbar-nav">     <li class="{{activeSection == SectionType.Primary ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li>     <li class="{{activeSection == SectionType.Aditional ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Aditional)">Additional Details</a></li>     <li class="{{activeSection == SectionType.Payment ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Payment)">Payment Settings </a></li>              </ul>`   })   export class TestComponent{   activeSection: SectionType = SectionType.Primary;    setActiveSection(section: SectionType) {         this.activeSection = section;     } } 

here is my enum:

enum SectionType {     Primary,     Aditional,     Payment } 

It is throwing EXCEPTION: TypeError: Cannot read property 'Primary' of undefined

</div
  

Список ответов

16
 
vote
vote
Лучший ответ
 

РазделType не может быть использован непосредственно внутри шаблона. Либо вы устанавливаете его в свойство вашего компонента, либо вы добавляете указать методы, чтобы проверить:

 <Код> @Component({     selector: 'test',     template: `       <ul class="nav navbar-nav">         <li class="{{isPrimarySection(activeSection) ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li>         (...)       </ul>     `   })   export class TestComponent{     activeSection: SectionType = SectionType.Primary;     setActiveSection(section: SectionType) {       this.activeSection = section;     }     isPrimarySection(activeSection) {       return activeSection == SectionType.Primary     }  }   

или

 <Код> @Component({     selector: 'test',     template: `       <ul class="nav navbar-nav">       <li class="{{activeSection == SectionType.Primary ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li>       (...)     </ul>`   })   export class TestComponent{     activeSection: SectionType = SectionType.Primary;     setActiveSection(section: SectionType) {       this.activeSection = section;     }     SectionType:SectionType = SectionType;   }   
 

SectionType can't be used directly within the template. Either you set it to a property of your component, either you add specify methods to check:

@Component({     selector: 'test',     template: `       <ul class="nav navbar-nav">         <li class="{{isPrimarySection(activeSection) ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li>         (...)       </ul>     `   })   export class TestComponent{     activeSection: SectionType = SectionType.Primary;     setActiveSection(section: SectionType) {       this.activeSection = section;     }     isPrimarySection(activeSection) {       return activeSection == SectionType.Primary     }  } 

or

@Component({     selector: 'test',     template: `       <ul class="nav navbar-nav">       <li class="{{activeSection == SectionType.Primary ? 'active': ''}}"><a href="javscript:void(0);" (click)="setActiveSection(SectionType.Primary)">Primary Details</a></li>       (...)     </ul>`   })   export class TestComponent{     activeSection: SectionType = SectionType.Primary;     setActiveSection(section: SectionType) {       this.activeSection = section;     }     SectionType:SectionType = SectionType;   } 
</div
 
 
       
       
36
 
vote

Простой способ использовать enum в шаблоне -

 <Код> @Component(...) export class MyComp {   public MyEnum: any = MyEnum; }   

Тогда в шаблоне:

 <Код> <select>   <option value="MyEnum.ValueA">Value A</option> </select>   
 

The simple way to use an Enum in a template is

@Component(...) export class MyComp {   public MyEnum: any = MyEnum; } 

Then in template:

<select>   <option value="MyEnum.ValueA">Value A</option> </select> 
</div
 
 
       
       

Связанный проблема

0  Форма не отображается с пустыми полями формы как часть процесса Create Crud в приложении Angular 7  ( Form not displaying with empty form fields as part of the create crud process in ) 
Я создаю создание PhancialAttify, которая является частью операции CRUD для одной из моих модели в угловой 7 приложения. Я использую формы ведомых шаблонов. К...

0  Как манипулировать RouterLink при использовании App-Sidebar-Nav в Coreui?  ( How to manipulate routerlink when using app sidebar nav in coreui ) 
Я использую app-sidebar-nav (ссылка здесь ) для перенаправления на различные части моего приложения. Однако дочерний маршрут добавляется к текущему URL-адр...

0  Angular 7 Получить изображения из Firebase  ( Angular 7 get images from firebase ) 
Попытка получить изображение от firestorage, как я могу добавить абсолютный путь перед <код> new Date("04-02-2008")7 или как я могу проверить путь и встроить...

0  Как я могу вернуть перемен на запрос на поставку при использовании Async и ждут угловой?  ( How do i return the resonse from a put request when using async and await in ang ) 
У меня есть функция, которая инициирует HTTP-запрос. Этот запрос возвращает ответ, который я хотел бы вернуться и получить доступ в другой функции как сравнен...

0  Redux и 3-й партийные библиотеки  ( Redux and the 3rd party libraries ) 
Мы строим админ-панель, и мы взяли NGX-admin в качестве основы. Я хочу использовать @ NGXS / Store в проекте. Но панель администратора получила 3-я сторонни...

0  Метод угловых GetCookie от так не работает больше  ( Angular getcookie method from so does not work anymore ) 
У меня есть следующий код от так: <код> import { Injectable } from '@angular/core'; @Injectable() export class CookieService { constructor() { } pub...

-3  Несоответствие массива JavaScript  ( Javascript array inconsistency ) 
У меня есть массив. Я бегу к проблемам, так что ... В моем коде я поместил следующий код отладки: <код> console.log(this.pages); console.log(this.pages.le...

-3  Нужно решение с NGFOR  ( Need solution with ngfor ) 
<код> //appcomponent.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [...

0  NGINX обслуживает старые статические файлы при доступе к HTTPS  ( Nginx serves old static files when accessing via https ) 
У меня есть проблема с AWS Lights Server Server, имеет Nginx, который обслуживает статические угловые файлы. Конфигурация: <код> server { listen 8080; ...

46  Angular 2 Azure Развертывание Ошибка обновления: ресурс, который вы ищете, был удален, было изменено его имя или временно недоступно  ( Angular 2 azure deploy refresh error the resource you are looking for has been ) 
У меня есть приложение Angular 2 RC-2 с применением базовой маршрутизации. Пути <код> empty-string5 Какой путь по умолчанию и <код> empty-string6 empty-stri...

1  Переместить угловые компоненты в WordPress  ( Move angular components to wordpress ) 
Я пытаюсь переместить мою угловое приложение в WordPress. Для этого мне не нужны все компоненты, потому что некоторые вещи сделаны с WordPress. Но мне нужно и...

0  Как проверить функцию в жасмине  ( How to test a function in jasmine ) 
Может кто-нибудь помочь мне, пожалуйста? Я пытаюсь проверить функцию, которая вызывает функции FireBase, но когда я вызываю основную функцию и начните управля...

4  Угловой материал CDK наложение прокрутки блока прокрутки не работает при навигационной панели  ( Angular material cdk overlay scroll block not working when in nav sidebar ) 
Я добавляю наложение CDK к Mat-Sidenav. Я хотел бы заблокировать прокрутку на Mat-SidenaV, когда наложение открыто. Я создаю наложение с заблокированным про...

2  Сообщение об ошибке в режиме отладки Monaca с Ansen UI угловой 2  ( Error message in monaca debug mode with onsen ui angular 2 ) 
У меня есть ошибки шаблона разбора в отладчике Monaca. При использовании monaca preview он работает в браузере без каких-либо проблем, но когда я использую ...

8  Отладка His Visual Studio Code Chrome, точка останова не ударит  ( Visual studio code debugging chrome breakpoints wont hit ) 
У меня есть приложение Angular2 / Tymdercript, которое я работаю в VSCode. Я использую Thelp, чтобы построить файлы Tearpcript и Gulp-SourceMap для создания ф...

Связанный проблема

0  Форма не отображается с пустыми полями формы как часть процесса Create Crud в приложении Angular 7 
0  Как манипулировать RouterLink при использовании App-Sidebar-Nav в Coreui? 
0  Angular 7 Получить изображения из Firebase 
0  Как я могу вернуть перемен на запрос на поставку при использовании Async и ждут угловой? 
0  Redux и 3-й партийные библиотеки 
0  Метод угловых GetCookie от так не работает больше 
-3  Несоответствие массива JavaScript 
-3  Нужно решение с NGFOR 
0  NGINX обслуживает старые статические файлы при доступе к HTTPS 
46  Angular 2 Azure Развертывание Ошибка обновления: ресурс, который вы ищете, был удален, было изменено его имя или временно недоступно 
1  Переместить угловые компоненты в WordPress 
0  Как проверить функцию в жасмине 
4  Угловой материал CDK наложение прокрутки блока прокрутки не работает при навигационной панели 
2  Сообщение об ошибке в режиме отладки Monaca с Ansen UI угловой 2 
8  Отладка His Visual Studio Code Chrome, точка останова не ударит