如何访问从组件中的服务获取的对象？

当我试图在searchAtoms中使用'this.atoms'访问原子时，它返回“TypeError：Can not read property'length of undefined”。我在考虑原子全部设置，因为* ngFor运行良好。订阅后面有一些隐藏的逻辑吗？如果有人知道这件事，你能否提供一些线索？而且，另一个问题是，当我使用参数定义getAtoms方法时，atom.service.ts中的输入字段获得原子名称值，例如this.service.getAtoms（newAtom）。但是我得到“一个参数proerty只允许在构造函数实现中”。我想我不能用这种方式。你有没有可能为此推荐一种理想的方式？如何访问从组件中的服务获取的对象？

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

atom.service.ts

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

来源

2016-11-18 Anna Lee

的Http服务返回一个Observable且您订阅了它。这是一个异步操作，但您试图在数据从服务器到达之前访问它。如果您将console.log移动到subscribe回调中，它将起作用。

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

对于第二个问题，你只需要删除private关键字。

getAtoms(newAtom: string) { }

来源

2016-11-18 15:06:39 Puigcerber

非常感谢，它运作良好。 –

附加问题，:)无论如何，我可以调用订阅方法吗？我通过将console.log（this.atoms.length）定义为另一个名为printTest（）的方法来测试它。我无法调用printTest，它说“ReferenceError：printTest（）未定义”。我认为这是有道理的。最终，我想分页这些原子，所以我需要对原子阵列进行一些操作。实际上，我正在考虑通过将其委托给分页服务（paging.service.ts）来分割有限数量的原子。你有这个任务的一些建议吗？我真的很感激它。 –

你把它叫做'this.printTest（）'吗？它应该工作。但是，我会建议您将分页逻辑移动到服务。 – Puigcerber

如何访问从组件中的服务获取的对象？

回答

相关问题