0

I am trying to get one of two different images to display based on the data returned for that record. I found something that should work but it is always displaying the image for the 'false' value. Any ideas?

Should this be done in the markup as shown below or should it be done in the ts file instead?

<div class='mat-padding' layout="row" layout-wrap>
  <mat-card style="width: 350px;">
    <mat-card-header [style.backgroundColor]="'orange'">
      <mat-card-title>Datafiles</mat-card-title>
    </mat-card-header>
      <mat-card-content [ngStyle]="{'height':'300px', 'overflow-y': 'auto', 'background-color': 'gray'}" >
        <div *ngFor="let l of list | async">
            <a [routerLink]="l.id">
            <p> {{ l.fileName }}  &nbsp;&nbsp; <img src="{{l.layoutPreDefined == false ? 'newlayout.jpg' : 'predefinedlayout.jpg'}}"/>  </p>
          </a>
            <p> {{ l.companyAbbreviation}}  &nbsp;&nbsp;  {{ l.fileTypeName }}</p>
        </div>
      </mat-card-content>
  </mat-card>
</div>

json for one file:

{
        "id": "00000035-0055-0000-0000-000000000000",
        "createdByID": "SB25",
        "createdDate": "2019-02-21T20:19:20.08",
        "modifiedByID": "SB25",
        "modifiedDate": "2019-02-21T20:19:20.08",
        "hasScheduleA": false,
        "showInEligibilityViewer": null,
        "fileNameID": "a62ae9dc-cc88-420c-97da-fb3f9e540bf1",
        "fileName": "XXXXXXXX",
        "companyID": "93b532c1-400f-4c48-9e32-d3dfdda1e3f7",
        "companyName": "XXXXXXXX",
        "companyAbbreviation": "XXXXXX",
        "vendorId": null,
        "vendorName": "",
        "vendorCode": "",
        "policyHolderId": null,
        "policyHolderName": "",
        "policyHolderCode": "",
        "groupNumber": "",
        "statusId": "1a88aa14-d30d-45b8-9c74-8e1f2fe4e26a",
        "statusName": "Development",
        "fileTypeId": "5cf07002-e663-4ba2-9ed3-0cb9f009b4a2",
        "fileTypeName": "Eligibility",
        "fileFormatId": "0cf3eb1c-769f-4e46-bdf0-d67830f6bf0a",
        "fileFormatName": "Fixed Width",
        "layoutId": "0a827513-7084-40a4-bbe3-02954f09a524",
        "layoutName": "XXXXXXX Eligibility",
        "layoutPreDefined": true,
        "outputDataFileId": null,
        "dataFileNumber": null
},
Synphony32
  • 43
  • 7

1 Answers1

1

If l.layoutPreDefined is a boolean and not a string, then you need to remove the single-quotes around false (See Why does “true” == true show false in JavaScript?). Making this change should get your code working. For clarity however, I would probably recommend changing your condition to the following:

l.layoutPreDefined == false ? 'newlayout.jpg' : 'predefinedlayout.jpg'

But that may just be my personal preference.

Sam Herrmann
  • 6,293
  • 4
  • 31
  • 50
  • I changed the condition to the one you recommended, however, I am still getting the newlayout image for all files. I have double checked the api with postman and two of the files are coming over as 'true' in the json. – Synphony32 Aug 21 '19 at 16:57
  • Can you add the data structure that you're seeing in postman to the question? – Sam Herrmann Aug 21 '19 at 17:07
  • I updated the code in my post to reflect the current code. – Synphony32 Aug 21 '19 at 17:08
  • Thanks! Everything looks good to me. I'm guessing you have verified that the two saved images are in fact different, i.e. you made sure you didn't accidentally save the same image under different names (that is something I would do :D)? – Sam Herrmann Aug 21 '19 at 17:22
  • You are correct because it is something I would do as well. I have changed the image to just return the value and two files showed up with true and the other 7 showed false. I also just triple checked the images in my image folder and they are in fact the correct images for each....sigh.... – Synphony32 Aug 21 '19 at 17:26
  • I created a simplified reproduction on [StackBlitz here](https://stackblitz.com/edit/angular-jtwuh5) that works as expected. Maybe that can help you spot any differences. – Sam Herrmann Aug 21 '19 at 17:30
  • After doing some digging, I found that I needed to add the full image path in assets. Now working properly. – Synphony32 Aug 21 '19 at 18:39