0

I'm pretty new to Angular2 and I'm facing a problem with the ngSwitch directive. For some reasons that I don't understand it seems that when i change the case - changing a value in a select - the html is appended to the existing one and not replaced.

Here is a portion of my template:

<select id="typeFC" class="form-control"
                                [(ngModel)]="object.type"
                                (change)="changeFunction()"
                                name="type">
    <option *ngFor="let type of response.types" [value]="type">
                                {{ type }}
    </option>
</select>
<div [ngSwitch]="object.type">
            <div *ngSwitchCase="'value1'" class="row">
                <app-common-card class="col-6"
                                 [nameCard]="'Card One A'">
                </app-common-card>
                <app-common-card class="col-6"
                                 [nameCard]="'Card One B'">
                </app-common-card>
            </div>
            <div *ngSwitchCase="'value2'" class="row">
                <app-common-card class="col-6"
                                 [nameCard]="'Card Two A'">
                </app-common-card>
                <app-common-card class="col-6"
                                 [nameCard]="'Card Two B'">
                </app-common-card>
            </div>

        </div>

In my component I have this property for the inizialization. 

exampleObject: ObjectType = {
        type: 'value1',
        stuff: 'value2'
    };

When I make a console log in the changeFunction it shows me the new value of the property, but the html part is appended to the already existing one. Can someone help me please?

shaqino
  • 23
  • 7
  • Have you tried replacing your with something simple like a

    tag to see if the issue is with ngSwitch or your component?

     – Calidus Jan 08 '18 at 18:52
  • Yes, I tried using

    {{exampleObject.value1}}

    instead of the component, but it still gives me the same problem. When I change the select from value1 to value2 I see value1 value2 I tried to substitute the ngSwitch with ngIf but still facing the same problem. Could it be some issue in my model?     – shaqino Jan 09 '18 at 08:37
  • That almost sounds like you have your html tags aren't lining up correctly, maybe you have a extra div tag in app-common-card somewhere which is throwing everything off? Maybe try removing the value 2 switch to see if you can get value1 to properly disappear? – Calidus Jan 10 '18 at 15:17

0 Answers0