Why there are both options of ngSwitch

Ionic Framework ionic-v3
1

Hello,
I’m new in ionic and thatswhy I have a newbie question.

I want to develop an app, witch remebers me at a specific Date. There is a ListView, witch the Dates and Icons. There should be the right picture. But I get both options of ngSwitch. What am I doing wrong?

 <ion-list>
    <ion-item *ngFor="let trashdate of trashdates">
      <span [ngSwitch]="trashdate.SUMMERY">
          <ion-thumbnail *ngSwitchCase="Gelber Sack">
              <img src="assets/imgs/meineimerchenicon_gelb.png" />
            </ion-thumbnail>
            <ion-thumbnail *ngSwitchCase="Papiertonne">
              <img src="assets/imgs/meineimerchenicon_blau.png" />
            </ion-thumbnail>
        {{trashdate.SUMMARY}}
      </span>
      </ion-item>

The Text in {{trashdate.SUMMARY}} is correct.

A Screenshot:

https://screenshots.firefox.com/ZPY4LZ2iHQE2CzlL/localhost

My Testdata:

public trashdates:any = [
     {
      "DTSTART;VALUE=DATE": "20181220",
      "DTEND;VALUE=DATE": "20181221",
      "DTSTAMP": "20180322T111107Z",
      "UID": "171812bc9e5ba2e39589d87731c26d03",
      "CREATED": "20180101T090000Z",
      "DESCRIPTION": "Gelber Sack nicht vergessen!",
      "LAST-MODIFIED": "20180101T090000Z",
      "LOCATION": "Winden",
      "SEQUENCE": "0",
      "STATUS": "CONFIRMED",
      "SUMMARY": "Gelber Sack",
      "TRANSP": "TRANSPARENT"
    },
    {
      "DTSTART;VALUE=DATE": "20181228",
      "DTEND;VALUE=DATE": "20181229",
      "DTSTAMP": "20180322T111107Z",
      "UID": "476440030486287179c7a3c18a13a183",
      "CREATED": "20180101T090000Z",
      "DESCRIPTION": "Papiertonne nicht vergessen!",
      "LAST-MODIFIED": "20180101T090000Z",
      "LOCATION": "Winden",
      "SEQUENCE": "0",
      "STATUS": "CONFIRMED",
      "SUMMARY": "Papiertonne",
      "TRANSP": "TRANSPARENT"
    },
    {
      "DTSTART;VALUE=DATE": "20181231",
      "DTEND;VALUE=DATE": "20190101",
      "DTSTAMP": "20180322T111107Z",
      "UID": "49ad31ac77a33e2ec1fe2f2ce6d20a2f",
      "CREATED": "20180101T090000Z",
      "DESCRIPTION": "Graue Tonne nicht vergessen!",
      "LAST-MODIFIED": "20180101T090000Z",
      "LOCATION": "Winden",
      "SEQUENCE": "0",
      "STATUS": "CONFIRMED",
      "SUMMARY": "Graue Tonne",
      "TRANSP": "TRANSPARENT"
    }
  ];
2

you have a typo here:

trashdate.SUMMERY
3

Try this:

...
<ion-thumbnail *ngSwitchCase="'Gelber Sack'">
...
<ion-thumbnail *ngSwitchCase="'Papiertonne'">
...

*ngSwitchCase awaits a value. You pass in Gelber Sack or Papiertonne and angular looks for a variable with that name. You don’t what to check if it is equal to the variable but to a string, so you have to insert single apostrophes inside the double apostrophes.

4

Thank You :slight_smile:

Embarrassing.

Here my Code for the next newbie. Beacause, I forgot the ’ Your not alone :slight_smile:

 <ion-item *ngFor="let trashdate of trashdates">
      <span [ngSwitch]="trashdate.SUMMARY" >
          <ion-thumbnail *ngSwitchCase="'Gelber Sack'">
              <img src="assets/imgs/meineimerchenicon_gelb.png" />
            </ion-thumbnail>
            <ion-thumbnail *ngSwitchCase="'Papiertonne'">
              <img src="assets/imgs/meineimerchenicon_blau.png" />
            </ion-thumbnail>
        {{trashdate.SUMMARY}}
      </span>