Question

我试图使用角度4来调用虚拟网页api，这是我的组件

export class AppComponent {
    title = 'app';
    url = 'https://api.ipify.org/?format=json';
     results: any;

 constructor(private http: Http) {

this.getData().subscribe(data => {
  this.results = data.json();

  })
 }

 getData() {
return this.http.get(this.url);
 }

}

但是当我试图显示它时，我得到了结果，但也出现了错误的画面

ERROR TypeError: Cannot read property 'ip' of undefined

我想要理解的是它显示的原因，因为在一瞬间之后数据显示良好。

Answer 1

在*ngFor中，您可以将其更改为*ngFor="let r of results | async"

您的问题是数据尚未存在，因此无法读取ID属性。

如果使用异步管道，它应该在显示数据之前等待数据。

Answer 2

使用猫王操作员代替我：安全操作员

{{results?.ip}}

Answer 3

更改此

import 'rxjs/add/operator/map';


this.getData().subscribe(data => {
  this.results = data;
 });
}

getData() {
     return this.http.get(this.url).map(resp => resp.json());
}

并在模板中添加

*ngIf="results"

Answer 4

将{{results}}放入您的html部分。您将看到服务器为您提供的值。

当你获得值并使用异步管道来正确显示它时，也许你应该使用* ngfor

Answer 5

import 'rxjs/add/operator/map';


this.getData().subscribe(data => {
  this.results = data;
 });
}

getData() {
     return this.http.get(this.url).map(resp => resp.json());
}

HTML部分

*ngFor="let r of results | async"
 <p>{{r}}</p>

Answer 6

如果你有多个属性你可以使用一个类并将它们注入那里，那么就没问题了。否则，如果您只有一个变量并希望显示它，请使用 安全导航操作符 user?.name

Answer 7

如果将组件添加到导入数组而不是声明数组，也会出现此错误。

@NgModule({
  imports: [
    ...,
    someComponent
  ],

  declarations: [...],
})
export class MainModule { }

应该是

@NgModule({
  imports: [
    ...,
  ],

  declarations: [...,someComponent],
})
export class MainModule { }

角4无法读取属性＆＃39; id＆＃39;未定义的

7 个答案: