angular2:缺少的"详细视图"服务教程

时间:2016-07-20 13:52:26

标签: angular angular2-services

几乎所有教程都展示了如何创建检索

等数据的服务
[
  {"id":1, "name":"cat"}, 
  {"id":2, "name":"dog"}, 
  {"id":3, "name":"cow"}, 
  ...
] 

并显示组件如何使用*ngFor来使用此类服务​​。

但是我希望根据其中一个选择获得更多数据的情况如何呢?例如,我从'列表服务'中选择狗。上面使用*ngFor选项来调用详细服务'喜欢

[
  {
    "id":2, 
    "name":"dog", 
    "species": "canine", 
    "weight": "2-100kg",
    "height": "10-100cm", 
    "smell": "good", 
    "character" : "great", 
    ... 
  }
]

我想在详细信息组件上使用它。

我如何&#34;消费&#34;这样的服务?对于一个单独的条目,*ngFor感觉不对,特别是因为我可能希望在模板的完全不同的区域中显示不同的部分而不是<li>列表。

1 个答案:

答案 0 :(得分:0)

您可以添加一个为您的结构提供信息的选择操作。

<select [ngModel]="selectedOption" (ngModelChange)="onChange($event)" name="sel">
    <option [value]="i" *ngFor="let i of options">{{i}}</option>
</select>