*ngFor data not displaying

Question

I'm trying to display on a table some tracks with spotify api, and it's not displaying anything. Here's the code

This is the tracksArray from the console.

(4) [{…}, {…}, {…}, {…}]
0: {uri: ""}
1: {uri: "spotify:track:4JhloJcv1weqqs8RfBLWk0"}
2: {uri: "spotify:track:7rHJr8x10nTZYR4j2VYlXu"}
3: {uri: "spotify:track:60SdxE8apGAxMiRrpbmLY0"}
length: 4
__proto__: Array(0)

Here's the html

@Component({
    moduleId: module.id,
    selector: 'app-favtracks',
    template: `
    <table class="table">
        <thead>
          <tr>
            <th class="styled-tableheader">Vista Previa</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let track of tracksArray">
            <td>
            <iframe
              [src]="track.uri | domsanitizer"
              width="320"
              height="90"
              frameborder="0"
              allowtransparency="true"
              allow="encrypted-media"
            ></iframe> 
            </td>
          </tr>
        </tbody>
      </table>
    `,
    styleUrls: ['./favtracks.component.scss'],
    providers: [SpotifyService]
})

What version of Angular are you using? I haven't seen `moduleId: module.id` done since version 2. — Reactgular, Apr 29 '19 at 22:46
This Question is already fixed by other users . Please Follow the reference link mentioned below . [Reference](https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception) Kindly Mention the DomSanitizer pipe , code also. — Gurpreet Singh, Apr 29 '19 at 22:23

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

If you use a proper DomSanitizer pipe you should get the elements properly, however I believe you are trying to display the uri by itself. I don't know if there's a way for that to work on its own, but if you put https://embed.spotify.com/?uri= in front of each of your uri, it should work. You could either do that in your template like so:

Template

<iframe
          [src]="'https://embed.spotify.com/?uri='+track.uri | SafePipe"
          width="320"
          height="90"
          frameborder="0"
          allowtransparency="true"
          allow="encrypted-media"
        ></iframe>

(Or save it as variable in your .ts then use that instead of writing the whole string in the template)

Or you can modify your array in your .ts, if you wanna keep the uri as they are for other things just add a property to your array:

Component

 ngOnInit() {
      this.tracksArray.forEach(e => {
        e["embeddedUri"] = "https://embed.spotify.com/?uri=" + e.uri;
      });
    }

Template

<iframe
          [src]="track.embeddedUri | SafePipe"
          width="320"
          height="90"
          frameborder="0"
          allowtransparency="true"
          allow="encrypted-media"
        ></iframe>

*ngFor data not displaying

1 Answers1

Template

Component

Template