GetVideosAPI，無法獲取陣列內的關鍵引數

我正在嘗試使用 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"}]}

正如你所看到的，它給了我引數結果，它是一個物件陣列，它是 api 給我的每個視頻。例如，我想使用第一個視頻中的密鑰，我如何使用 *ngIf 獲取該密鑰引數。到目前為止，我的代碼一直是這樣的，我找不到讓它作業的方法。

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

*ngIf 中的視頻是我給 api 提供的變數名稱，因此我可以在 html 中訪問它。每當我嘗試使用 videos.key 時，它都不會給我任何東西，就像它不存在一樣。

uj5u.com熱心網友回復：

我想你需要的是

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

標籤：有角度的 angularjs api

上一篇：單例bean如何處理動態索引

下一篇：檢查物件陣列