* ngДанные не отображаются - PullRequest
Новая
       16

* ngДанные не отображаются

1 голос
/ 30 апреля 2019

Я пытаюсь отобразить на столе некоторые треки с помощью spotify api, и он ничего не отображает. Вот код

Это массив дорожек из консоли. 

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

Вот 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]
})

1 Ответ

0 голосов
/ 30 апреля 2019

Если вы используете правильную трубу DomSanitizer, вы должны правильно получить элементы, однако я считаю, что вы пытаетесь отобразить uri сам по себе. Я не знаю, есть ли способ, чтобы это работало само по себе, но если вы поставите https://embed.spotify.com/?uri= перед каждым из ваших uri, это должно сработать. Вы можете сделать это в своем шаблоне так:

Template 

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

(Или сохраните его как переменную в вашем .ts, затем используйте это вместо записи всей строки в шаблоне)

Или вы можете изменить свой массив в ваших .ts, если вы хотите оставить uri такими, какие они есть для других вещей, просто добавьте свойство в ваш массив:

Компонент 

 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>
...