HTML中的接口变量有效，但会引发Console TypeError？

我能做些什么来摆脱这个错误？HTML中的接口变量有效，但会引发Console TypeError？

ERROR TypeError: Cannot read property 'feed' of undefined

我有：

的接口（SpreadsheetTabs），其定义了从一个谷歌电子表格
，妥善返回JSON作为该接口类型

A服务一些复杂的JSON spreadsheet-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>

来源

2017-08-07 Mathias

请添加您的SpreadsheetTabs接口c ö – Faisal

太大，不能在这里发帖 – Mathias

使用安全导航操作符（？）在你的模板，因此，如果theTabs为空或未定义，它赢得了”牛逼试图让饲料的价值：

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

从Angular.io：

Angular安全导航运算符（？。）是一种流畅且方便的方法，用于防止属性路径中出现空值和未定义值。

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

来源

2017-08-07 15:26:44

哇，工作，谢谢！ TypeError消失了，但循环按预期工作 – Mathias

在打字稿您可以通过给属性指定一些默认值初始化界面

heTabs: SpreadsheetTabs={feed=[] };

您也可以处理你与航行安全，运营商也

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

来源

2017-08-07 15:33:08 JEMI

HTML中的接口变量有效，但会引发Console TypeError？

回答

相关问题