Question

我该怎么做才能摆脱这个错误？

ERROR TypeError: Cannot read property 'feed' of undefined

我有：

界面（SpreadsheetTabs），用于定义谷歌电子表格中的一些复杂JSON
正确返回JSON作为该接口类型的服务

电子表格tabs.service.ts

getTabs(): Promise<SpreadsheetTabs> {
    return this.http.get(this.tabsUrl)
        .toPromise()
        .then(response => this.extractData(response.json() as SpreadsheetTabs[] ))
        .catch(this.handleError);
}

home.component.ts

import { Component, OnInit } from '@angular/core';
import { SpreadsheetTabs } from '../models/SpreadsheetTabs';
import { SpreadsheetTabsService } from '../services/spreadsheet-tabs.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  theTabs: SpreadsheetTabs;
  constructor(private spreadsheetTabsService: SpreadsheetTabsService) { }

  ngOnInit(): void {

    this.spreadsheetTabsService.getTabs()
      .then(tabs => {

        // assign results returned to variable
        this.theTabs = tabs;

        // I can loop through here - no errors
        for (const oneTab of this.theTabs.feed.entry) {
          console.log(oneTab.title.$t + ' - ' + oneTab.link[0].href + '?alt=json');
        }
      });

  }
}

home.component.html

<p>
  loop also works here, but throws console TypeError above
</p>
<h3>tabs list:</h3>
<div *ngFor="let oneTab of theTabs.feed.entry">
    <h4>{{oneTab.title.$t + ' - ' + oneTab.link[0].href + '?alt=json'}}</h4>
</div>

Answer 1

在模板中使用安全导航操作符（？），这样如果theTabs为null或未定义，则不会尝试获取Feed的值：

*ngFor="let oneTab of theTabs?.feed.entry"

来自Angular.io：

Angular安全导航操作员（？。）流畅方便防止属性路径中的null和未定义值的方法。

不要与其他语言的空合并运算符混淆。这特定于模板处理而不是打字稿的一部分。或者你可以将theTabs默认为空数组，但问题是你必须始终确保getTabs()的结果总是返回一个数组（或者只使用|| }：this.theTabs = tabs || []）。

Answer 2

在打字稿中您可以通过为属性

指定一些默认值来初始化界面

heTabs: SpreadsheetTabs={feed=[] };

您还可以使用安全导航操作符

处理角度模板中的null和undefined

您可以从模板语法文档部分了解有关此运算符的更多信息 https://angular.io/guide/template-syntax

HTML中的接口变量可以工作，但抛出控制台TypeError？

2 个答案: