GetVideos API, 获取不到数组中的关键参数

Question

我正在尝试使用 Angular.js 使用 Api 制作电影网站。我已经到达了我想将电影预告片放在按钮中的部分，但是每次我尝试使用 GetVideo Api 它都没有给我正确的响应，因为它无法到达键参数。每当我调用 api 时，它都会给我这样的响应：

{"id":675353,"results":[{"iso_639_1":"en","iso_3166_1":"US","name":"Knuckle Down Featurette","key":"9djAMds545g","site":"YouTube","size":1080,"type":"Featurette","official":true,"published_at":"2022-04-06T13:03:17.000Z","id":"625f56d80792e10177d1f049"},{"iso_639_1":"en","iso_3166_1":"US","name":"Put A Ring On It Clip","key":"RHSU0SJv33A","site":"YouTube","size":1080,"type":"Clip","official":true,"published_at":"2022-04-04T15:00:44.000Z","id":"625f56c9d4cc8e0051a2ea47"},{"iso_639_1":"en","iso_3166_1":"US","name":"Kid Cudi","key":"YkZ1aAPApAc","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-04-03T16:00:58.000Z","id":"624abb4d84591c0064898ed3"},{"iso_639_1":"en","iso_3166_1":"US","name":"No Spoilers","key":"UXWwYfvJ7BA","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-03-29T16:00:58.000Z","id":"625f56b7a5046e00a473d13c"},{"iso_639_1":"en","iso_3166_1":"US","name":"Bigger, Bluer, Better","key":"Xr-VlbaJvcA","site":"YouTube","size":1080,"type":"Featurette","official":true,"published_at":"2022-03-28T13:03:21.000Z","id":"625f52e7db952d004f89d2a6"},{"iso_639_1":"en","iso_3166_1":"US","name":"Meet Knuckles Clip","key":"LF64NG_NJQw","site":"YouTube","size":1080,"type":"Clip","official":true,"published_at":"2022-03-28T13:03:01.000Z","id":"625f52b8e61e6d0050f7f638"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"I Make This Look Good\" Clip","key":"qdJfgKGgHP4","site":"YouTube","size":1080,"type":"Clip","official":true,"published_at":"2022-03-25T13:00:36.000Z","id":"62413ad9706e5600481793ca"},{"iso_639_1":"en","iso_3166_1":"US","name":"Final Trailer","key":"47r8FXYZWNU","site":"YouTube","size":1080,"type":"Trailer","official":true,"published_at":"2022-03-14T13:02:25.000Z","id":"622f6e2e9c24fc0044921909"},{"iso_639_1":"en","iso_3166_1":"US","name":"Madness","key":"F5uv5XiNHAs","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-03-13T19:00:19.000Z","id":"6269b877c613ce006684544b"},{"iso_639_1":"en","iso_3166_1":"US","name":"Fastest Trailer","key":"HCzqO6SPgnk","site":"YouTube","size":1080,"type":"Featurette","official":true,"published_at":"2022-03-13T16:00:32.000Z","id":"622f6e5098f1f1007808f169"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"Blue Justice\"","key":"sEOrfwBCxYI","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-03-02T14:08:12.000Z","id":"62384a38db4ed6001b06107f"},{"iso_639_1":"en","iso_3166_1":"US","name":"Choose Your Team","key":"7NVMZWV_vTg","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-13T17:01:52.000Z","id":"62094453cb8028009c0204c0"},{"iso_639_1":"en","iso_3166_1":"US","name":"Big Game Spot","key":"uVj6vs-738o","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-11T14:07:53.000Z","id":"62068d96f48b340097c51eb0"},{"iso_639_1":"en","iso_3166_1":"US","name":"Rings","key":"9-PbLuusH44","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-10T17:01:06.000Z","id":"62068e0fefd3c2001cde1b88"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"The Real Competition Begins\"","key":"vxdzRz6gUD4","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2022-02-07T17:22:36.000Z","id":"623849dc9ee0ef0046da27bb"},{"iso_639_1":"en","iso_3166_1":"US","name":"\"Red Quill or Blue Quill\"","key":"S8qRuGm2E_I","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2021-12-22T19:56:51.000Z","id":"61d223311684f7001ca74c6c"},{"iso_639_1":"en","iso_3166_1":"US","name":"Official Trailer","key":"G5kzUpWAusI","site":"YouTube","size":1080,"type":"Trailer","official":true,"published_at":"2021-12-10T01:41:15.000Z","id":"61b2b31b38e510008aee0361"},{"iso_639_1":"en","iso_3166_1":"US","name":"Title Announcement","key":"sQuoffM1y-w","site":"YouTube","size":1080,"type":"Teaser","official":true,"published_at":"2021-02-10T15:00:33.000Z","id":"602416bcc2b9df003ea481d4"}]}

如您所见，它给了我参数 result，它是一个对象数组，是 api 给我的每个视频。例如，我想使用第一个视频中的 key，如何使用 *ngIf 获取 key 参数。到目前为止，我的代码一直是这样，我找不到让它工作的方法。

 <div *ngIf="videos">
        <a href="https://youtu.be/{{ videos.key }}">
          <button>
            <i class="fa fa-play"> Watch Video</i>
          </button>
        </a>
      </div>

*ngIf 中的 videos 是我给 api 的变量名，所以我可以在 html 中访问它。每当我尝试使用 videos.key 它不会给我任何东西，就像它不存在一样..

Answer 1

我觉得你需要的是

 <div *ngIf="videos?.results.length > 0">
        <-- Get first item -->
        <a href="https://youtu.be/{{ videos.results[0].key }}">
          <button>
            <i class="fa fa-play"> Watch Video</i>
          </button>
        </a>
</div>

GetVideos API, 获取不到数组中的关键参数

GetVideos API, Cant get the key parameter inside the array

angular

angularjs

api