首页 > 解决方案 > 正确显示在页面上时出现属性不存在的错误

问题描述

我从 Angular 然后从节点调用 twitter API,但我收到一个错误,即“对象”类型上不存在属性。但它正确显示在页面上。

我尝试重命名该属性并查看了我设置的推文服务,但我似乎无法弄清楚出了什么问题。

import { Component, OnInit } from '@angular/core';
import { TweetService } from '../../services/tweet.service';

@Component({
  selector: 'app-twitter-page',
  templateUrl: './twitter-page.component.html',
  styleUrls: ['./twitter-page.component.scss']
})
export class TwitterPageComponent implements OnInit {

  tweetsArray;

  constructor(
    private twitter: TweetService
  ) { }

  ngOnInit() {
    this.twitter.getTweets().subscribe(tweet => {

      this.tweetsArray = tweet.tweets[0];
      console.log(this.tweetsArray);
    });
  }
}

错误:

ERROR in src/app/main-body/twitter-page/twitter-page.component.ts(20,32): error TS2339: Property 'tweets' does not exist on type 'Object'.

标签: node.jsangular

解决方案


这里的 tweet 是没有属性的 Object 类型。

您应该定义一个接口ITweet并将推文投射到该接口。这为推文对象提供了一个形状,并定义了它的可用属性集。

推文.ts -

export interface ITweet {
...
};

twitter-page.component.ts - (注 - .subscribe((tweet:ITweet) => {})

import { ITweet } from './tweet.ts';
.
.
.
export class TwitterPageComponent implements OnInit {
.
.
.

  ngOnInit() {
      this.twitter.getTweets().subscribe((tweet:ITweet) => {

        this.tweetsArray = tweet.tweets[0];
        console.log(this.tweetsArray);
      });
    }    
}

或者,您也可以将推文投射到任何 ( .subscribe((tweet:any) => {}))。但不建议这样做,因为您将失去类型检查的好处。


推荐阅读