在 Angular 4 中显示订阅数据答案

【问题标题】：Display Subscribe Data in Angular 4在 Angular 4 中显示订阅数据
【发布时间】：2018-02-15 16:28:31
【问题描述】：

我需要帮助来显示 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");
        });
  }
}

【问题讨论】：

标签： json angular angular-http angular-httpclient

【解决方案1】：

您的数据是数组类型，

创建任何类型的变量

myData : any;

并将数据分配给 myData，

this.newsService
    .getNews()
    .subscribe(
        data => {
           this.myData = data.data;
        },
        error => {
          alert("ERROR");
        }
    );

您可以使用 ngFor 遍历数组并在 HTML 中显示

<li *ngFor="let item of myData">
     {{item}}
</li>

【讨论】：

我认为是this.myData = data.data;
@Sajeetharan。未捕获（承诺中）：错误：模板解析错误：无法绑定到“ngForOf”，因为它不是“li”的已知属性
@Sajeetharan。仍在 data.data 上，类型对象上不存在属性数据

【解决方案2】：

在组件中创建一个属性

myData: any[] = [];

在您的订阅者功能中

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");
        });
      }
    }

在你的模板中

1) 查看 JSON 的选项

<pre>{{myData | json}}</pre>

2) 如果你有数组，则循环选项

<div *ngFor="let d of myData">
    {{d}}
</div>

【讨论】：

错误：模板解析错误：无法绑定到“ngForOf”，因为它不是“div”的已知属性。 ("
]*ngFor="let d of myData"> {{d}}
查看这篇文章在你的模块中添加浏览器模块或通用模块stackoverflow.com/questions/40331549/…
还要检查数据尝试模板选项 1
```
{{myData | json}}
```

【解决方案3】：

你需要这样做

ngOnInit() {
 this.newsService.getNews()
  .subscribe(
    data => {
      data = data.json();
      console.log(data.data);
    },
    error => {
      alert("ERROR");
    });

}

data.json() 部分很重要，它将响应转换为正确的 json，以便访问其数据。现在您可以将它分配给这样的实例变量

this.myArrayData = data.data

在您的 subscribe() 方法中然后在你的模板中

<div *ngFor="let data of myArrayData">
  <!-- do whatever with the data properties -->
</div>

【讨论】：

HttpClient 是新的 http。所以我不需要写 data.json()。默认情况下它是一个 json。我的错误现在在 html 上。错误：模板解析错误：无法绑定到“ngForOf”，因为它不是“div”的已知属性。 ("
]*ngFor="let d of myData"> {{d}}
您是否尝试使用像这样的 json 管道在模板中输出它
{{myData | json}}
你是否在 NgModule (app.module.ts) 的 imports[] 中导入了 BrowserModule？
出现新错误。错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables