*ngFor 数据不显示答案

【问题标题】：*ngFor data not displaying*ngFor 数据不显示
【发布时间】：2019-09-18 13:21:55
【问题描述】：

我正在尝试使用 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]
})

【问题讨论】：

您是否在控制台中遇到错误？
此问题已被其他用户修复。请按照下面提到的参考链接。 Reference 请提及 DomSanitizer 管道，代码也一样。
嗨，Jason，不，我在控制台上没有收到任何错误
您使用的是哪个版本的 Angular？自第 2 版以来，我还没有看到 moduleId: module.id 完成。

标签： arrays angular display ngfor

【解决方案1】：

如果您使用正确的 DomSanitizer 管道，您应该正确获取元素，但是我相信您正在尝试自行显示 uri。我不知道是否有办法让它自己工作，但如果你把https://embed.spotify.com/?uri= 放在你的每个uri 前面，它应该可以工作。您可以像这样在模板中执行此操作：

模板

<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;
      });
    }

模板

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

【讨论】：