如何訪問從服務中獲取的組件中的對象？

Question

當我嘗試在searchAtoms中使用“ this.atoms”訪問原子時，它返回“ TypeError：無法讀取未定義的屬性'length'”。 我認為原子已經設置好了，因為* ngFor運作良好。 訂閱背后有一些隱藏的邏輯嗎？ 如果有人知道這一點，您能提供一些線索嗎？ 還有另一個問題，當我使用參數定義getAtoms方法時，原子名稱值是從atom.service.ts的輸入字段中獲得的，就像this.service.getAtoms（newAtom）一樣。 但是我得到“僅在構造函數實現中允許使用參數屬性”。 我想我不能用這種方式。 有人可以為此推薦一個理想的方法嗎？

app.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';
import {AtomService} from './service/atom.service';
import {Atom} from './datatype/Atom';

@Component({
    selector: 'my-app',
    template: `<br>
    <input #atomname value='atom1'>
    <button (click)=searchAtoms(atomname.value)>Search Atoms</button>  
    <br><br>
    <ul>
        <li *ngFor="#atom of atoms">
            {{atom.id}} - {{atom.name}}
        </li>
    </ul>`,
    providers: [ConceptService]
})


export class AppComponent {

    atoms: Array<Atom>;

    constructor(private service : AtomService) {

    }

    searchAtoms(newAtom: string) {
        console.log("searchAtoms\t" + newAtom);
        if (newAtom) {
            this.service.getAtoms(newAtom).subscribe(data => this.atoms = data);
            console.log(this.atoms.length);
        }
    }
}

原子服務

import { Injectable }     from 'angular2/core';
import { Http, Response, URLSearchParams, Headers } from 'angular2/http';
import 'rxjs/add/operator/map';
import {Atom} from '../datatype/Atom';

@Injectable()
export class ConceptService {

  constructor(private http: Http) {
    this.http = http;
  }

  getAtoms(private newAtom: string) {
    return this.http.get('api/atoms.js')
    .map( (responseData) => {return responseData.json()})
    .map( data => {
        let results:Array<Atom> = [];
        for (var i = 0; i < data.result.length; i++) {
            results.push(new Atom(data.result[i].id, data.result[i].name));
        }
        return results;
    });
  }
}

Answer 1

Http服務返回一個Observable ，您訂閱了它。 這是一個異步操作，但是您試圖在數據從服務器到達之前對其進行訪問。 如果將console.log移動到您的subscribe回調中，它將起作用。

this.service.getAtoms(newAtom).subscribe(data => {
  this.atoms = data;
  console.log(this.atoms.length);
});

對於第二個問題，您只需要刪除private關鍵字即可。

getAtoms(newAtom: string) { }