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给我的每个视频。例如，我想使用键在第一个视频中，我如何使用*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中访问它。每当我尝试使用视频时。关键是它没有给我任何东西，就像它不存在一样。

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>