0
当我试图在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;
});
}
}
非常感谢,它运作良好。 –
附加问题,:)无论如何,我可以调用订阅方法吗?我通过将console.log(this.atoms.length)定义为另一个名为printTest()的方法来测试它。我无法调用printTest,它说“ReferenceError:printTest()未定义”。我认为这是有道理的。最终,我想分页这些原子,所以我需要对原子阵列进行一些操作。实际上,我正在考虑通过将其委托给分页服务(paging.service.ts)来分割有限数量的原子。你有这个任务的一些建议吗?我真的很感激它。 –
你把它叫做'this.printTest()'吗?它应该工作。但是,我会建议您将分页逻辑移动到服务。 – Puigcerber