如何解决 Angular 中的 ngSwitchCase？

Question

我的 ngSwitchCase 有问题。那么问题是这个案子没有正确地完成它的工作。当我拖放一个文本框时，应该会出现一个文本框。但是当我放下文本框时，我得到了一个文本框和文本区域，这是另一个 ngSwitchCase。有谁知道我做错了什么，因为我似乎无法弄清楚。

formadd.component.html

<fieldset class="element">
          <legend class="voeg-element" placeholder="voeg element toe" cdkDropList
          #doneList="cdkDropList"
          [cdkDropListData]="done"
          (cdkDropListDropped)="drop($event)">
          <div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
            <div *ngSwitchCase="Textbox">
              <input kendoTextBox>
            </div>
            <div *ngSwitchCase="Textarea">
              <textarea kendoTextArea></textarea>
            </div>
            <div *ngSwitchDefault>{{item}}</div>
            </div>
        </legend>
        </fieldset>

panelwrapper.component.html

<kendo-panelbar class="panelbar">
        <kendo-panelbar-item class="panelbar-een" [title]="'Elementen'" cdkDropList cdkDropListSortingDisabled>
            <kendo-panelbar-item class="panelbar-twee" [title]="'Categorie'" icon="custom-icon" cdkDrag [cdkDragData]="'Categorie'"></kendo-panelbar-item>
            <kendo-panelbar-item class="panelbar-drie" [title]="'Textbox'" icon="textbox" cdkDrag>
                    <kendo-textbox-container floatingLabel="Text Box 1">
                            <input kendoTextBox placeholder="test" *cdkDragPreview/>
                          </kendo-textbox-container>  
            </kendo-panelbar-item>
            <kendo-panelbar-item class="panelbar-vier" [title]="'Textarea'" icon="textarea" cdkDrag [cdkDragData]="'Textarea'"></kendo-panelbar-item>
            <kendo-panelbar-item class="panelbar-vijf" [title]="'Date'" icon="calendar-date" cdkDrag [cdkDragData]="'Date'"></kendo-panelbar-item>
</kendo-panelbar>

这是我将文本框放入字段集中时看到的内容：

Answer 1

您需要在*ngSwitchCase 中使用单引号。 例如：

<fieldset class="element">
          <legend class="voeg-element" placeholder="voeg element toe" cdkDropList
          #doneList="cdkDropList"
          [cdkDropListData]="done"
          (cdkDropListDropped)="drop($event)">
          <div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
            <div *ngSwitchCase="'Textbox'">
              <input kendoTextBox>
            </div>
            <div *ngSwitchCase="'Textarea'">
              <textarea kendoTextArea></textarea>
            </div>
            <div *ngSwitchDefault>{{item}}</div>
            </div>
        </legend>
        </fieldset>