相关疑难解决方法(0)

Typescript枚举似乎与Angular2的ngSwitch指令自然匹配.但是当我尝试在我的组件模板中使用枚举时,我得到"无法读取未定义的属性'xxx'......".如何在组件模板中使用枚举值？

请注意,这与基于枚举(ngFor)的所有值创建html选择选项的方法不同.这个问题是关于ngSwitch基于枚举的特定值.虽然出现了创建枚举类的内部引用的相同方法.

我写了一个动态表单,其中有一个主要部分和子部分基于在主要部分(widget.type)中选择的类型.使用ngSwitch显示和隐藏子部件.

表单的HTML如下所示:

<form class="widget-form cc-form" (ngSubmit)="saveChanges()" novalidate>
  <div class="forms-group">
    <label for="title" i18n="@@title">Titel</label>
    <input class="form-control" id="title" name="title" type="text" [(ngModel)]="widget.title" required />
  </div>

  <div class="forms-group">
    <label class="checkbox-label" for="show" i18n>
      <input id="show" name="show" type="checkbox" [(ngModel)]="widget.show" /> <span>Titel tonen in app</span>
    </label>
  </div>

  <div class="forms-group">
    <label for="type" i18n="@@type">Type</label>
    <select class="form-control" id="type" name="type" [(ngModel)]="widget.type" required>
      <option value="text-widget" i18n="@@Text">Tekst</option>
      <option value="tasklist-widget" i18n="@@Tasklists">Takenlijst</option>      
      <option value="image-widget" i18n="@@Text">Afbeelding(en)</option>
      <option value="video-widget" i18n="@@Video">Youtube</option>
      <option value="link-widget" i18n="@@Link">Link</option>
      <option value="contacts-widget" i18n="@@Contacts">Contactpersonen</option>
      <option value="attachment-widget" i18n="@@Attachments">Bijlage(n)</option>
    </select>
  </div>

  <ng-container [ngSwitch]="widget.type">

    <text-widget *ngSwitchCase="'text-widget'" [data]="widget"></text-widget>

    <tasklist-widget *ngSwitchCase="'tasklist-widget'" …