如何在Angular中解决ngSwitchCase？

Question

我的ngSwitchCase有问题。问题是案件没有正确履行职责。当我拖放文本框时，将出现一个文本框。但是，当我放下文本框时，会得到一个文本框和textarea，这是另一个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>

尝试一下，看看是否有帮助。