* ng对于不显示的数据

Question

我正在尝试在桌子上显示带有Spotify api的某些曲目，并且没有显示任何内容。这是代码

这是控制台中的tracksArray。

(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]
})

Answer 1

如果使用正确的DomSanitizer管道，则应正确获取元素，但是我相信您正在尝试自行显示uri。我不知道是否有一种方法可以单独工作，但是如果您将on_app_window_destroy放在每个https://embed.spotify.com/?uri=的前面，它应该可以工作。您可以在模板中执行以下操作：

模板

uri

（或将其另存为.ts中的变量，然后使用它代替在模板中写入整个字符串）

---

或者您可以在.ts中修改数组，如果您想像其他情况一样保留<iframe [src]="'https://embed.spotify.com/?uri='+track.uri | SafePipe" width="320" height="90" frameborder="0" allowtransparency="true" allow="encrypted-media" ></iframe> ，只需在数组中添加一个属性即可。

组件

uri

模板

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