javascript - 訪問和操作已訂閱的可觀察數據

我有一個服務可以從後端取得資料。我可以用這段程式碼在瀏覽器控制台看到取得的資料 .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.descrip？

答案＃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

答案＃2

你必須加上大括號：

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

第二個 console.log 在資料實際接收之前就被執行了，這就是為什麼看起來你還沒有獲得資料，其實你很可能已經有了資料。

如果你試圖在你的視圖中顯示資料，你可能需要使用 ngIf 或者使用埃爾維斯運算子，以便能夠呈現你的資料。這是因為這些調用是非同步的。

所以例如用……包裹你的 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>