我的服务返回两个项目列表,我希望将每个列表呈现给差异选择器
this.http.get(url).map(res => res.json())json返回{ list1: [...], list2: [...] }
我有两个<div>来呈现list1和list2。
是否可以使用Angular JS 2?
发布于 2016-03-03 13:19:14
class MyService {
private _list1;
private _list2;
getList1() {
if(this._list1) {
return Observable.of(this._list1);
} else {
return _getList(1);
}
}
getList2() {
if(this._list2) {
return Observable.of(this._list2);
} else {
return _getList(2);
}
}
private _getList(listNo) {
return this.http.get(url).map(res => {
var json = res.json();
this._list1 = value.list1;
this._list2 = value.list2;
if(listNo == 1) {
return json.list1;
}
if(listNo == 2) {
return json.list2;
}
});
}
}@Component({
selector: 'my-component1',
pipes: [KeysPipe],
template: `
<ul>
<li *ngFor="let item of list | keys">{{item.key}} - {{item.value}}</li>
</ul>
`
})
export class MyComponent1 {
constructor(private MyService myService) {
myService.getList1().subscribe.(value => this.list = value);
}
}@Component({
selector: 'my-component2',
pipes: [KeysPipe],
template: `
<ul>
<li *ngFor="let item of list | keys">{{item.key}} - {{item.value}}</li>
</ul>
`
})
export class MyComponent2 {
constructor(private MyService myService) {
myService.getList2().subscribe.(value => this.list = value);
}
}如果您想在同一组件中呈现这两个列表,当然可以进行简化。
有关KeysPipe,请参阅access key and value of object using *ngFor
发布于 2016-03-03 14:29:12
我不知道您的请求是如何触发调用的。例如,另一个组件。
您还可以在服务中定义两个EventEmitter属性(每个列表一个),以便在HTTP调用的响应存在时发出事件。有两个组件可以订阅它,以便在有数据时得到通知。
导出类ListService { list1Event: EventEmitter =新EventEmitter();list2Event: EventEmitter =新EventEmitter();getLists() { return this.http.get(url).map(res => res.json()) .subscribe( (data) => { this.list1Event.emit(data.list1);this.list2Event.emit(data.list2);} );}}Component #1实现
@Component({选择器:'my-component1',模板:<ul> <li \*ngFor="#item of list">{{item.name}}</li> </ul> })导出类MyComponent1 {构造函数(私有服务:ListService){ this.service.list1Event.subscribe.(data => { this.list = data;});} }
@Component({选择器:'other-component',模板:<div (click)="executeRequest()">Execute request</div> })导出类OtherComponent {构造函数(私有服务:ListService){} executeRequest() { this.service.getLists();} }
有关更多详细信息,请参阅此问题:
https://stackoverflow.com/questions/35761450
复制相似问题