Как решить ngSwitchCase в Angular? - PullRequest
Новая
       25

Как решить ngSwitchCase в Angular?

0 голосов
/ 07 ноября 2019

У меня проблема с моим 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>

Вот что я вижу, когда я помещаю текстовое поле в набор полей: enter image description here

1 Ответ

1 голос
/ 07 ноября 2019

Может быть, вам нужно использовать одинарные кавычки внутри *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>

Попробуйте и посмотрите, поможет ли это.

...