json 在 Angular 4 中显示订阅数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46087785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Subscribe Data in Angular 4
提问by Robert
I need help in displaying the output of subscribe from an api in Angular 4. How can i do this since I wrote data.data.data but it says property data doesnt exist on type object. How would i output it in the browser? Here's my code below and the api picture below
我需要帮助来显示从 Angular 4 中的 api 订阅的输出。自从我写了 data.data.data 后我该怎么做，但它说类型对象上不存在属性数据。我将如何在浏览器中输出它？这是我下面的代码和下面的api图片
import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';
@Component({
selector: 'app-news-list',
templateUrl: './news-list.component.html',
styleUrls: ['./news-list.component.css']
})
export class NewsListComponent implements OnInit {
constructor(private newsService: NewsService) { }
ngOnInit() {
this.newsService.getNews()
.subscribe(
data => {
alert("News Success");
console.log(data);
},
error => {
alert("ERROR");
});
}
}
回答by Piyush Patel
create a property in component
在组件中创建一个属性
myData: any[] = [];
and in your subscriber function
并在您的订阅者功能中
import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';
@Component({
selector: 'app-news-list',
templateUrl: './news-list.component.html',
styleUrls: ['./news-list.component.css']
})
export class NewsListComponent implements OnInit {
constructor(private newsService: NewsService) { }
ngOnInit() {
this.newsService.getNews()
.subscribe(
(res: any) => {
alert("News Success");
this.myData = res.data;
// Where you find the array res.data or res.data.data
console.log('res is ', res.data);
},
error => {
alert("ERROR");
});
}
}
and in your template
并在您的模板中
1) option to view JSON
1) 查看 JSON 的选项
<pre>{{myData | json}}</pre>
2) option to loop if you got the array
2）如果你有数组，则可以选择循环
<div *ngFor="let d of myData">
{{d}}
</div>
回答by Sajeetharan
Your data is type of array,
您的数据是数组类型，
Create a variable of type any
创建一个类型为 any 的变量
myData : any;
and assign the data to myData,
并将数据分配给 myData，
this.newsService
.getNews()
.subscribe(
data => {
this.myData = data.data;
},
error => {
alert("ERROR");
}
);
you can use ngForto iterate over array and display in the HTML
您可以使用ngFor迭代数组并在 HTML 中显示
<li *ngFor="let item of myData">
{{item}}
</li>
回答by asimhashmi
You need to do it like this
你需要这样做
ngOnInit() {
this.newsService.getNews()
.subscribe(
data => {
data = data.json();
console.log(data.data);
},
error => {
alert("ERROR");
});
}
}
the data.json()part is important, it converts the response into proper json so can access its data.
Now you can assign it to instance variable like this
这data.json()部分很重要，它将响应转换为正确的 json，以便可以访问其数据。现在你可以像这样将它分配给实例变量
this.myArrayData = data.data
this.myArrayData = data.data
inside your subscribe()method
Then in your template
在你的subscribe()方法中然后在你的模板中
<div *ngFor="let data of myArrayData">
<!-- do whatever with the data properties -->
</div>
