Angular 角度2+；错误类型错误：无法读取属性''&引用；未定义的

我在这里看到了同样的问题，但我尝试了一些解决方案，但我无法解决这个问题

我从一个JSON文件接收数据，并使用服务打印出值。问题是我可以在控制台中看到如下错误

错误类型错误：无法读取未定义的属性“0”

角度为2+

请参阅下面的代码：

iberpagetop.component.ts

export class IberPageTopComponent implements OnInit {
location: any[];  

constructor(private _locationService: LocationService, private translate: TranslateService) {
    translate.setDefaultLang('en'); 
}

switchLanguage(language: string) {
     this.translate.use(language);
}

ngOnInit() {
    this._locationService.getLocationData()
        .subscribe(data => this.location = data)

} 

IberpageTop.html

<table class="">            
        <tbody>
        <tr>
          <td><h3>DOÑA BENITA</h3></td>
          <td> <p><span translate>Business</span> {{ location[0].business }}</p></td>
          <td><p><span translate>Sub-Region</span> {{ location[0].subRegion }}</p></td>
        </tr>
        <tr>
          <td><p><span translate>Power</span> {{ location[0].power }}</p></td>              
          <td><p><span translate>Country</span> {{ location[0].country }}</p></td>
          <td><p><span translate>Maint. Region</span> {{ location[0].maintRegion }}</p></td>
        </tr>
        <tr>

          <td><p><span translate>Last updated</span> {{ location[0].lastUpdate }}</p></td>
          <td><p><span translate>Region</span> {{ location[0].region }}</p></td>
          <td><p><span translate>Main Area</span> {{ location[0].mainArea }}</p></td>
        </tr>
        </tbody>
    </table>   

locations.ts（接口）

location.service.ts

    import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ILocation } from '../location';
import { Observable } from 'rxjs';


@Injectable()
export class LocationService {

    private _url: string = "/assets/data/locations.json";


    constructor(private http: HttpClient) {}

    getLocationData(): Observable<ILocation[]> {
        return this.http.get<ILocation[]>(this._url);
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“../location”导入{ILocation}；
从“rxjs”导入{Observable}；
@可注射（）
出口类定位服务{
private\u url:string=“/assets/data/locations.json”；
构造函数（私有http:HttpClient）{}
getLocationData（）：可观察{
返回this.http.get（this.\uURL）；
}
}

我将感谢任何帮助。

---

提前感谢。

您应该使用此选项来处理此类错误。在所有情况下，如果您使用此

位置[0]？。

而不是

位置[0]。

来处理html页面中的错误。

尝试

它基本上表示您的服务返回空数据。检查您的文件位置，并记录您的通话结果，以确保。我使用了ngIf，它工作了！！！干杯它有什么好处？。你能更深入地解释一下吗？或者给我举个例子？。Thanks@Timba此

位置[0]？.busines

表示已检查

位置是否有值。如果
location
有一些值，那么它将显示数据，否则它将显示空白值。我明白了！！！谢谢
    export interface ILocation {
    field: string,
    power: string,
    lastUpdate: Date,
    business: string,
    country: string,
    region: string,
    subRegion: string,
    maintRegion: string,
    mainArea: string
}

    import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ILocation } from '../location';
import { Observable } from 'rxjs';


@Injectable()
export class LocationService {

    private _url: string = "/assets/data/locations.json";


    constructor(private http: HttpClient) {}

    getLocationData(): Observable<ILocation[]> {
        return this.http.get<ILocation[]>(this._url);
    }
}