访问和操作订阅的可观察数据

Question

我有一个服务可以从后端检索数据。我可以使用此代码在浏览器控制台中看到检索到的数据 .do(data =>console.log('All: ' + JSON.stringify(data))) ---> 以 JSON 格式显示我的任何数据数组。在我的组件中，我订阅了该服务，但我无法弄清楚如何访问检索数据以对其进行操作，因为我需要将参数传递给函数。

元件：

import { Component, OnInit } from '@angular/core';
//inject services
import { HitoService } from '../hito.service';
import {IHito} from '../form-hito/interfaceHito';
declare var vis: any;
declare var swal: any;
declare var $: any;

@Component({
  selector: 'app-time-line',
  templateUrl: './time-line.component.html',
  styleUrls: ['./time-line.component.css'],
  providers: [HitoService]
})
export class TimeLineComponent implements OnInit {
 hito1: IHito[];
  constructor(private _hitoService: HitoService) { }
  ngOnInit() {
  this._hitoService.getHitos()
        .subscribe(hito1 => this.hito1 = hito1); 
        console.log("hitos de DB:");
console.log(this.hito); 
  this.drawtimeline1_1();
 }

我在控制台中看到的数据是这样的：

All: [{"_id":"587817c60de1f905b5811786","descrip":" testeo de creacion de hito ","endDate":"2017-01-26","startDate":"2017-01-08","nameHito":"hito test","__v":0},{"_id":"5878180a0de1f905b5811787","descrip":" testeo de creacion de hito otra vez ","endDate":"2017-01-15","startDate":"2017-01-06","nameHito":"hito test number 2","__v":0},{"_id":"587820820b0a4e05c5678ab7","descrip":" testeo de creacion de hito una vez más ","endDate":"2017-01-15","startDate":"2017-01-06","nameHito":"hito test number 3","__v":0},{"_id":"5878d262639a4d0323bfcd4b","descrip":"lslskkdldjdjh","endDate":"2017-01-01","startDate":"2017-01-01","nameHito":"kkakkakakakkaa","__v":0}]

例如，

订阅后，我如何访问每个backend_data.scrip？

Answer 1

你应该对代码进行一些更改

ngOnInit() {
    this._hitoService.getHitos()
        .subscribe(hito1 => {
           this.hito1 = hito1
           console.log(this.hito);<-- if you console you will get output
           this.drawtimeline1_1();<-- you can pass this.hito as parameter if you want
        }); 
  }

要访问每个描述，您可以这样做

1）如果要在HTML视图中显示

  <ul *ngIf="hito1"> 
     <li *ngFor="let values of hito1">{{values.descrip}}</li>
   </ul>

2）如果要在组件区域中访问，可以使用Lodash https://lodash.com/docs/4.17.4#forEach

Answer 2

您必须添加大括号：

  ngOnInit() {
    this._hitoService.getHitos()
        .subscribe(hito1 => {
           this.hito1 = hito1
           console.log("hitos de DB:"...); // defined!
        }); 
        console.log("hitos de DB:"...); // undefined!
  }

第二个控制台.log get在实际接收数据之前执行，这就是为什么您似乎没有获得数据的原因，而实际上您可能已经获得了数据。

如果您尝试在视图中显示数据，则可能需要使用 ngIf 或 elvis 运算符，以便能够呈现数据。这是因为调用是异步的。

例如，用

html 包装

<div *ngIf="hito1">
  <!-- Your data manipulation here -->
</div>

编辑：如果您想访问您的属性，它很容易完成。以您的 json 为例，它看起来像这样：

[
    {
        "_id": "587817c60de1f905b5811786",
        "descrip": " testeo de creacion de hito ",
        "endDate": "2017-01-26",
        "startDate": "2017-01-08",
        "nameHito": "hito test", "__v": 0
    },
    ......
]

整个数组和属性可以迭代和显示，例如显示 id 和名称。下面使用 *ngFor 迭代整个数组，并显示每个对象的 id 和描述。

<div *ngIf="hito1">
  <div *ngFor="let data of hito1">
    <div>{{data._id}}</div>
    <div>{{data._descrip}}</div>
  </div>
</div>