Question

我正在使用Google的youtube API，尽管我成功检索了数据，但无法以有意义的方式显示数据。我使用API调用服务，代码如下。我正在尝试显示从API获得的特定结果的列表，例如名称，描述和缩略图。

videos.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Videolist} from '../Models/videolist.model';

@Injectable({
    providedIn: 'root'
})
export class VideosService {
    constructor(private http: HttpClient) {
    }

    public query: string;
    results = new Array();

    getVideos() {
        const finalURL = 'https://www.googleapis.com/youtube/v3/search?key=*myapikey*&part=snippet' +
            ',id&order=date&maxResults=8&q=' + this.query;
        return this.http.get<Videolist>(finalURL);
    }
}

videolist.model.ts

import {Deserialize} from './deserialize.model';

export class Videolist implements Deserialize<Videolist> {
    videoId: string;
    description: string;
    thumbnails: any;

    deserialize(input: any): Videolist {
        Object.assign(this, input);
        return this;
    }
}

topbar.component.ts

import {Component, OnInit} from '@angular/core';
import {VideosService} from '../services/videos.service';
import {ViewEncapsulation} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Component({
    selector: 'app-topbar',
    templateUrl: './topbar.component.html',
    styleUrls: ['./topbar.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class TopbarComponent {
    id = '2r5IbVJRvH4';
    private player;
    public ytEvent;
    public token: string;

    constructor(public data: VideosService) {
    }

    searchForm() {
        this.data.getVideos().subscribe(data => {
            this.data.results = data['items'];
            console.log(this.data.results);
        });

topbar.component.html

<div fxLayout="row" fxLayoutAlign="start center" class="margin">
    <mat-toolbar>
        <form class="example-form">
            <mat-form-field class="testi">
                <input id="haku" matInput placeholder="Search for songs" [(ngModel)]="data.query" name="query">

            </mat-form-field>
            <button (click)="searchForm()" mat-button style="margin-left: 40px !important;"><mat-icon matSuffix>search</mat-icon></button>
        </form>
    </mat-toolbar>
</div>
<div class="container" fxLayoutAlign="center center">
    <div fxLayout="row" fxLayoutAlign="center start" class="keskii">
        <mat-card class="vasen">
            <mat-list>
                <mat-list-item *ngFor="let video of data.results"></mat-list-item>
                <h3 matLine> {{ video.description }}</h3>
            </mat-list>

我正在使用[(ngModel)]进行查询的双向数据绑定，然后单击一个从我的topbarcomponent.ts使用功能searchForm()的按钮，该按钮通过服务获取了我想要的结果。但是，如果尝试遍历data.results (*ngFor="let video of data.results")，则会收到 video is undefined 的错误。我的模型不正确吗，我是否试图错误地遍历结果？如果您还没有注意到，那么我绝对是一个初学者。

Answer 1

在HTTP请求完成之前，您的结果将不可用。在那之前它们是不确定的。跳过未定义就行了：）

我建议您将其包装在* ngIf中，直到结果可用：

.Result

您还可以使用* ngIf

来显示一些替代内容，同时未定义结果

角度6，未定义ngFor标识符

1 个答案: