Angular4将SVG与* ngFor一起使用

Question

I'm trying to use SVG for font-icons which works perfectly. However, I'm stuck with a major problem while using *ngFor . This is my code

<ion-col col-3 *ngFor="let land of landscape_amenities>
    <span class="icon-{{land.id}}"></span><br />
    <span>{{land.name}}</span>
</ion-col>

Now, I'm trying to use SVG and I don't know how to call SVGs that would match the id . Is there something that can be done in the .ts file? The id is unique and unused at the moment.

The output of the file is this:

<ion-col col-3="">
    <span class="icon-beds"></span>
    <br>
    <span>Beds</span>
</ion-col>
<ion-col col-3="">
    <span class="icon-sofa"></span>
    <br>
    <span>Sofa</span>
</ion-col>
....

I have over 20 SVGs to put in this *ngFor . This is my SVG code for the bed id:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <g>
        <path d="M490.667,261.334v-42.667c0-32.427-20.907-53.333-53.333-53.333H192c-32.427,0-53.333,20.907-53.333,53.333V261
            L34.88,261.227H21.333V80.32c0-5.333-3.84-10.133-9.067-10.88C5.653,68.48,0,73.6,0,80v351.68c0,5.333,3.84,10.133,9.067,10.88
            c6.613,0.96,12.267-4.16,12.267-10.56v-64h469.333v63.68c0,5.333,3.84,10.133,9.067,10.88C506.347,443.52,512,438.4,512,432
            V282.667C512,268.16,505.173,261.44,490.667,261.334z M160,218.667c0-27.84,20.053-32,32-32h245.333c11.947,0,32,4.16,32,32
            v42.667H160V218.667z M490.666,346.667H21.333v-64h469.333V346.667z"/>
    </g>
    <g>
        <path d="M80.5,142.5c-32.723,0-59.25,26.527-59.25,59.25c0,32.723,26.527,59.25,59.25,59.25s59.25-26.527,59.25-59.25
            C139.75,169.027,113.223,142.5,80.5,142.5z M80.5,242c-22.229,0-40.25-18.021-40.25-40.25S58.271,161.5,80.5,161.5
            s40.25,18.021,40.25,40.25S102.73,242,80.5,242z"/>
    </g>
</svg>

Answer 1

You can follow given code :

<ion-col col-3 *ngFor="let land of landscape_amenities>
    <icon src="./assets/{{land.id}}"/><br />
    <span>{{land.name}}</span>
</ion-col>

Here I'm assuming that your images (by name of id ie beds, sofa) are present in the assets folder.

As per your comment you can also set your path using typescript method:

<icon [src]="getImageSource(land.id)"/>

And in your ts file you would create a method :

getImageSource(svgId:String):String {
  return `./assets/$svgId`;
}

But I won't recommend you doing this as I guess you won't be changing svg data once assigned. So due to angular change detection it will call the method multiple times. So instead just assign the image source in template itself instead of creating a function in your .ts file.