角度-如何重复使用不同数据的组件？

Question

我有一个Angular 2应用，我想在其中列出数据中的所有位置（我随服务一起使用）。

我计划在父母内部使用* ngFor列出它们：

<ul *ngFor="let location in myservice.locations"></ul>

首先，这可能吗？ 该组件将对每个位置重复一次，并且看起来与数据相同。

我只是不确定从哪里开始。 如果我的服务收到4个位置对象，每个对象都有名称和日期数据，该如何处理？

我在想我的位置（子级）组件看起来像这样吗？

...
export class locationComponent implements OnInit{
    constructor(private _myserviceService: MyserviceService) {
  }
obj;
ngOnInit(){
var locationname = ; 
var locationdate = ;
    let observable = this._myserviceService.getLocations();
     observable.subscribe(data => {
     this.obj = data
  })}

的HTML将是这样的：

{{location.locationname}}
{{location.locationdate}}

我的主要问题是，如何确保构造位置组件，以便可以将其与多个数据对象一起使用，并可以遍历它们？

谢谢！！ 让我知道是否可以澄清。

Answer 1

看看这个 。 我认为这就是您想要的。

我路过

  [{
    id: 'location 1'
  },{
    id: 'location 2'
  }]

使用*ngFor循环到子组件，在该子组件中可以根据组件呈现每个对象。

Answer 2

首先，从端点接收的数据将存储在this.obj中（代码：this.obj = data），然后在html中，您可以

<ul *ngFor="let location in obj">
  <li>{{location.locationname}}</li>
  <li>{{location.locationdate}}</li>
</ul>

每个位置将显示两行