angular - Typescript 属性 'length' 在类型上不存在

Question

我是 Typescript 的新手，一直在尝试让以下代码片段正常工作:

quoteService.getQuoteOfTheDay()
        .then(quotes => this.quote = quotes[Math.floor(Math.random() * quotes.length)]);

想法是从数组中随机选择一个引号。

相反，我在终端 Property 'length' does not exist on type 'Quote' 中收到以下错误。

如果我将 quotes.length 更改为 4 代码段有效，但我希望该函数计算出有多少引号，然后随机返回一个。

下面是整个组件。

import { Component } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { Http } from '@angular/http';

import { Quote } from './quote.model';
import { QuoteService } from './quote.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [QuoteService]
})

export class AppComponent {

    title = 'App is running!';
    quote: Quote;

    constructor(quoteService: QuoteService) {

      quoteService.getQuoteOfTheDay()
        .then(quotes => this.quote = quotes[Math.floor(Math.random() * quotes.length)]);

    }
}

quote.service.ts 是错误的

getQuoteOfTheDay(): Promise<Quote> {
    return this.http.get('quote.json').toPromise()
        .then(response => response.json());
}

本来应该是这样的

getQuoteOfTheDay(): Promise<any> {
    return this.http.get('quote.json').toPromise()
        .then(response => response.json());
}

Answer 1

您的类型 getQuoteOfTheDay(): Promise<Quote>似乎是错误的。虽然方法名称、方法类型和文件名都表明返回的 promise 将只用一个单引号实现，但您的组件正在使用它，就好像它返回了一个引号数组一样。你会想要使用

getQuotesOfTheDay(): Promise<[Quote]> {
//      ^                    ^     ^
    return this.http.get('quotes.json').toPromise()
//                             ^
        .then(response => response.json());
}